前端技術棧

時間 2019-11-11

標籤前端技術简体版

原文原文鏈接

前端的一大特色和一大難點，就是跟上時俱進的各類技術和庫的發展。不管你是不知道到底學React好仍是Angular好的初學者，仍是老是在糾結Grunt仍是Gulp的老鳥，老是會面臨這樣那樣的各類在前端領域中的選擇。如下文字是本人關於如今在工做以及本身項目中最喜歡用的最順手也以爲是目前來講最有前途的前端開發工具，但願能對相關的朋友們有所幫助。

一下是關於每一個工具上榜的理由，一些衆所周知的理由這裏就不重複了。javascript

基礎庫：React

組件化的UI方便開發，測試以及管理
JSX的語法可以在寫html的時候最大程度上利用JS的優點
強大的開發community
擺脫了繁瑣的two-way-binding
方便的server side rendering

架構：Redux

目前爲止公認最好的flux implementation
語法簡潔
豐富的文章，教程以及第三方工具(thunk, logger, dev-tool等等)
Middleware大讚

語言：ES6/Babel

ES6的時代正在來臨，跟上節奏
前端的職位基本都已經把ES6放在了基本要求裏
跟ES5相比有不少好用的新東西

格式：ESLint/AirBnb

半強制的讓你寫出所謂優雅的代碼哈哈，沒什麼好說的，硅谷各大小公司前端通用規範css

包管理：npm

沒什麼好說的，基本沒有競爭者。這裏有一點要強調下：請好好利用npm scripthtml

打包：webpack

組件化的管理
基本上能夠load全部東西
只load你須要的東西
大規模項目必備，誰用誰知道

關於組件化管理：好比一個button組件，文件結構以下：前端

-- src
  -- components
    -- Button
      -- index.js
      -- index.css

index.js和index.css只包含關於這個button的東西.vue

index.jsjava

import './index.css';
...
...
render() {
    return (
        <button className='app-button'>Click me</button>
    );
}

index.cssmysql

.app-button {
    color: black;
}

測試：Mocha + Chai + Sinon

沒什麼好說的，基本已成爲行業標準react

服務器：Sails.js

MVC + Realtime
強大的預設和擴展性
REST API自動生成
任務流水線

注意：Sail.js自帶的ORM是waterline，自帶的任務運行和打包工具是grunt。若是有需求的話本身花一兩天研究下能夠改爲bookshelf和webpack.webpack

http/https請求: fetch

Firefox和chrome原生API，如今請用isomorphic-fetch來得到全部瀏覽器的支持
先後端通用
Promise

ORM：bookshelf

後臺與數據庫交互的必備神器git

Promise：Bluebird

若是你不想被callback搞得生活不能自理：

function isUserTooYoung(id, callback) {
    openDatabase(function(db) {
        getCollection(db, 'users', function(col) {
            find(col, {'id': id},function(result) {
                result.filter(function(user) {
                    callback(user.age < cutoffAge)
                })
            })
        })
    })
}

請用promise:

function isUserTooYoung(id) {
    return openDatabase(db)
        .then(getCollection)
        .then(find.bind(null, {'id': id}))
        .then(function(user) {
            return user.age < cutoffAge;
        });
}