2015年前端開發技術棧及開發工具？

01-03

大家好前端開發小菜一枚請教問題大家能否透露一下目前使用的前端技術棧及開發工具我目前的開發主要包括crud、微信兩類web開發正在技術選型希望大家能暢所欲言我也將邀請知乎上平易近人的前端開發技術大牛來回答一下先此致謝
舉個例子：What I would recommend instead of Angular.js?
但是不太喜歡reactjs 感覺與webcomponent的理念不一致

現在最火的是 React + React-Router + Redux + Webpack

當然你說了你不喜歡 React，那麼歡迎使用 Vue + Vue-Router + Vuex + Webpack

比起 ng2 / Aurelia，React / Vue 的好處就是路由/狀態管理/數據通信/構建方案都是可選的，不喜歡你可以換或者自己搞。

蟹妖。

貼自己的一篇文章吧：《前端程序員的自我修養》

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

讀史使人明智。——弗蘭西斯.培根

學習歷史，

可以幫助我們看清現在的決定，

並為以後的發展做好準備。

前端技術，是界面技術的一種應用。

字元界面DOS

圖形界面GUI

瀏覽器界面Browser

前端項目，屬於B/S類型的平台體系結構。

文件/伺服器F/S

客戶端/伺服器C/S

瀏覽器/伺服器B/S

JavaScript，是最流行的客戶端技術，

其他的還有，Java-Applet Flash ActiveX Silverlight

Web前端，是網頁技術一個發展階段，

在這個過程中，伺服器端經歷了，CGI，Web框架，MVC，

客戶端經歷了，HTML，CSS，AJAX，前端MVC，前端組件化。

JavaScript也推廣到了伺服器端，

伺服器端腳本Node.js，

資料庫MongoDB，

WebAppReact-Native，

桌面應用nw.js

總結

前端技術是一個處理人機交互的關鍵環節，

各種技術都匯聚於此，

隨著雲計算需要，以及移動設備的出現，

前端已經變的越來越豐富多彩，

大有平分天下的趨勢。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

前端技術棧

語言只是一種工具，對一個聰明的程序員來說，用沒用過什麼工具主要是由他原來的工作需要決定，並不能代表他全部的技能。

——請不要說自己是XX程序員

前端技術浩如煙海，

單純JavaScript語言來說，也有數不清的細節，

為了有一個整體的印象，我們分類來看。

精一行，必先通十行。

瀏覽器環境IE6~8 IE9+ Chrome Firefox Safari Opera Edge

HTTP協議URI Cache Session Cookie Request Response

HTMLW3C HTML4.01 HTML5 DOM 語義化

CSSCSS1~3 選擇器盒模型 Flex 媒體檢測響應式渲染引擎

JavaScriptEcmaScript3~5~6 Lexical-scope prototype-chain AJAX js引擎

編輯器Emacs Vim WebStorm Atom Sublime-Text

發布部署合併壓縮單元測試 Node.js Grunt Gulp Yeoman Phantom JSLint

框架類庫jQuery Zepto UnderScore Backbone Knockout React AngularJS

模塊管理CommonJS Webpack

UI框架BootStrap SemanticUI jQueryUI Foundation

推送技術WebSocket 輪詢長連接

跨域技術iframe JSONP CORS

數據可視化D3 Echarts HighCharts Canvas

非同步編程Promise $.Deferred Generator

CSS預處理器LESS SASS Stylus

客戶端模板Handlebars Haml Jade Mustache

相關語言CoffeeScript TypeScript Dart WebAssembly

WebApp/PCReact-native ionic

以上提到的這些，幾乎成了前端程序員的標配了，

所以，我們需要很努力，才不會被淘汰。

JavaScript是一個動態弱類型的，原型繼承的，函數式的編程語言，

掌握它並不簡單，也為了與伺服器端程序員愉快的溝通，

我們還要再學習一些編程語言。

C/Rust/Go

C#/Java

Scheme/Haskell

PHP/Python/Ruby

Prolog/Erlang

包括命令式，面向對象，函數式，邏輯式，

各種典型的編程泛型。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

少爭論多讀書

思而不學則殆。——孔子

我們之所以迷惑，不是因為缺少思考，

而是缺少學習。

前端的書籍越來越容易找到了，

除了EmcaScript語言規範之外，還有一些有趣的讀物。

JavaScript權威指南

JavaScript高級程序設計

JavaScript語言精粹

JavaScript模式

JavaScript DOM高級程序設計

高性能JavaScript編程

JavaScript非同步編程

JavaScript忍者的秘密

基於MVC的JavaScript Web富應用開發

jQuery權威指南

犀利開發jQuery內核詳解與實踐

jQuery Mobile權威指南

用AngularJS開發下一代Web應用

Node.js開發指南

高性能網站建設指南

響應式Web設計

快速軟體開發

測試驅動開發

重構

人月神話

敏捷軟體開發：原則，模式與實踐

面向模式的軟體架構

計算機程序的構造與解釋

讀書是一個愉快的過程。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

參考

「淺論CS和BS體系結構」

「Web開發的發展史」

「Web的發展史」

「前端工程——基礎篇」

「Overview: JavaScript, Flash, Java, Silverlight and ActiveX」

「jQuery,Extjs,YUI,Prototype,Dojo 等JS框架的區別和應用場景簡述」

「Web開發技術的演變」

「請不要說自己是Java程序員」

「WebFrontEndStack」

「伺服器內容推送技術」

移動端 Vue + Webpack + gulp

PC端 jQuery + browser-sync + gulp

移動端開發編輯器 Sublime

PC端開發編輯器 Brackets

不知不覺，已經1年angular 開發經驗了，使用angular後，深深體會到mvvm框架帶來開發上的便利，以及加深了對組件化的認識。針對於開發大型的應用系統來說，angular組件非同步載入、多節點渲染性能等都存著很大的障礙。最近使用vuejs+browserify，相比之前，感覺整個清爽了許多。當然還有sass、gulp，hapi、koajs等等，對於前端開發來講，都很有幫助。

我來安利一下React + Redux……不過你的JS基礎夠硬才可以

Webpack + React + Node

我是搞後端的，無奈公司需要，做過幾個hybrid app. 框架變了又變，也算是緊追潮流了吧。我沒有想去深入研究這些框架的慾望，所以只能說說作為一個普通用戶的使用體驗。

最早一個用的是backbone, 沒了，mvc中的v直接上的是html。不得不說backbone還是不錯的，文檔寫得挺清楚，感覺是短小精悍型，有什麼問題直接debug source code也可以。但無奈我的html+css技術太爛，所以做得很不爽。

然後第二個項目用了backbone和當時剛出的一個view rendering框架http://famo.us，我猜沒幾個人用過。。。當時吹得可吊了，似乎這個框架最炫的地方是做animation。由於http://famo.us直接取代了html和js，我基本不需要寫html，所以我還是用得挺開心的。實在話，http://famo.us的語法啥的也是比較好理解的。But！！！！寫的時候爽了，寫完跑起來才發現性能不太行啊！！！尤其是infinite list，卡的要命。後來看了一下它的source code才發現它每隔幾十毫秒就遍歷所有rendering tree，以此來更新。。。。。不知道現在這個框架怎麼樣了，感覺寫好了還是挺好用的。

最近一個項目用的是react+reflux，經歷過前兩個項目的摧殘，現在看到各種框架花式作死的寫法也能淡然面對了。花幾天重點研究了一下reflux的store, action概念就上手了。react到沒怎麼研究，反正也見慣不怪了。概念吹的那些virtual dom更是對我沒什麼意義，管它呢，能寫出來再說，性能這回事淪落到靠框架也是無奈。寫的過程挺順暢，不過中途發現react的相關庫少了些。譬如我想做一個infinite list，搜了一下github，沒幾個好用的。這種基礎設施react還是稍顯單薄，不過能預期將來會越來越好，畢竟自帶facebook光環。

作為一名偽前端，感覺做前端真是需要大心臟。不知什麼時候突然蹦出一個新的框架又要開始跟著學了。不過也好，見得多了才知道什麼適合自己。

不是大牛，

用的是快淘汰的requirejs加ie兼容性還不錯的avalon這套應付內網系統。。

看清楚過去才能把握未來，前端的現在和未來可以參考下這篇文章

前端演化史

http://mp.weixin.qq.com/s?__biz=MzA5NTM2MTEzNw==mid=428939474idx=1sn=888a4fc728c81774f2ac2011a5ffcdcfscene=0#wechat_redirect

PostCSS 會將上一步傳入的 CSS 按照一條條樣式規則（rule）進行解析（Parser）得到一個節點樹；然後藉助一系列插件在節點樹上進行轉換操作，並最終通過Stringifier 進行拼接。source map則記錄了前後的對應關係。當然，在實際的開發中其實不必深究原理，最重要的是看其提供的API 來調用即可。PostCSS 的作為一個CSS 轉換引擎，其不參與細分功能實現僅交於第三方插件的設計理念，讓其產生了一個非常的開放的生態。但對於個開放機制下的一些情況筆者並不是很贊同，如一些用中文寫CSS 的插件（當然這個更多是for fun），一些自定義CSS 屬性如用size。http://985.so/b5hwh

我們用的是jquery.swper.加html，好處是可控性強，很少實現不了的功能。壞處是載入的內容多，效率還沒經檢驗。

我司用的是React+Redux+webpack+gulp，用了部分的ES6+babel，還有mocha+chai

我們的方案目前是以closure-tools套件為核心，自己實現的輕量級構建工具，在clsoure-library核心庫上建立業務封裝。

目前項目用的 Vue+Vue-Router+Webpack 用得挺爽的

vue很不錯，在最近的一個項目中用了下，碰到了問題，文檔齊全，社區支持也不錯，問了問題當天就得到了解答。

還是react吧，已經有較好的完整生態，有些時候不習慣是因為沒有嘗試，或是嘗試了發現困難放棄了，要理性分析到細節點

http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html

推薦個網站 http://jsrun.net/square

我也不喜歡react，感覺只有Facebook的程序猿（追求速度，不追求可維護程度的全棧）玩的轉。我喜歡符合前端風格的框架，例如vue。