2016 Web開發資源工具大搜羅

標籤：大全   bootstrap   線上   業務需求   學習   軟體   技術   存在   sem   

來源於：https://zhuanlan.zhihu.com/p/22730771

 

餘博倫
連結：https://zhuanlan.zhihu.com/p/22730771
來源：知乎
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。

Web的迅猛發展對於開發人員來說既是一件好事也是一件壞事。不斷緊跟潮流學習新的技術、程式設計語言、適應變化聽起來就很令人興奮又緊張。你需要面對的挑戰可能包括使用已有的架構適應新的業務需求，測試網站的相容性，最佳化你的網站前端和後端更好地協同。今天在這裡介紹給大家的這個收集列表也許能夠協助你完成類似的工作。

P.S. 順序先後並不代表推薦排名。

JavaScript 庫/架構

JavaScript是全世界最受歡迎的Web程式設計語言。人們為了快捷開發網站或應用預先編寫一些JS類庫。你可以通過一些公用CDN很方便地在自己的網站上引入這些庫：

<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

• jQuery: 方便快捷，功能強大全面，居家旅行必備，近乎JS的替代品，你可以不會js，但是不能不會jQuery。
• BackBoneJS: 模型、視圖、集合、事件，讓你的前端代碼更有架構感。
• D3.js: 資料視覺效果必學必會，只有你想不出來的，沒有D3畫不出來的。
• React: 學會React，再學學React-native，你就能從一個前端化身Web app工程師、IOS/Andorid開發人員、案頭應用工程師……
• jQuery UI: 幾行代碼就能寫一個帶動畫帶ajax的Web應用。
• jQuery Mobile: 移動端專用js開發架構，和上面的類似襖。
• Underscore.js: 非入侵式架構，提供了眾多有用的函數方法，彌補jQuery的不足。
• Moment.js: 原生的JS顯示輸出日期時間真的很痛苦，Moment為你解決了一切啦～
• Lodash: 模組化且高效，lodash和underscore很相似。

前端架構

• Bootstrap: 全世界最流行的響應式前端架構。
• Foundation: 提供了很多模版，針對網站、移動端、郵件提供了很多好用的模組和樣式。
• Semantic UI: 個人非常喜歡的一個前端架構，樣式非常好看，更重要的是就像它語義UI的名稱一樣，類命名特別友好，寫網頁就像和人說話一樣。
• uikit: 漂亮、可定製，即將發布uikit3版本，感興趣可以試試看。

Web應用程式框架

• Ruby on Rails: Ruby on Rails 是一款用ruby語言編寫Web應用的MVC架構，github就是用它寫的襖！
• AngularJS: Google主導的Web開發架構，資料繫結、MVVM，很可惜被後來更靈活的React、Vue等架構搶去了風頭。
• Ember.js: 用來開發單頁Web應用的JS前端MVC架構。
• Express: Node.js上的Web架構，搭建網站或API服務只要一秒鐘！
• Meteor: JS全端架構，是的，你只需要學習JavaScript一門語言，就可以完成Web應用前後端、資料庫的開發。
• Django: Python的Web架構，人生苦短，請用Python.
• Flask: Python的Web架構，據說只要學好flask就能隨意找到好工作？
• ASP.net: 老一輩人的最愛。
• Laravel: 最優雅性感的PHP Web架構，好用到不能再好用，優雅到不能再優雅，畢竟PHP是全世界最好的語言嘛。
• Phalcon: 用C語言擴充的，據說是最快的PHP架構。

自動化構建/包管理

• Grunt: JavaScript自動化工具。
• Gulp: 個人感覺是最好用的自動化構建工具。
• webpack：模組化載入構建一切，CSS/JS連圖片都可以
• npm: NPM雖好，不要太依賴襖。
• Bower: 前端架構套件管理工具，各類架構和庫一鍵安裝。

程式設計語言

• PHP: 全世界最好的語言不解釋。
• NodeJS: 可以運行在伺服器端的JS，只需學習一門語言即可全棧編程。
• Javascript: 日益強大的指令碼語言，現如今學前端基本就是學JS編程。
• HTML5: 網頁的標記語言。
• Python: 人生苦短，請用Python。比好用更好用。
• Ruby: 簡潔高效，學Ruby基本就是為了學用rails
• Scala: 相容函數式、物件導向、命令式編程，可以和JAVA互連。
• CSS3: 網頁的樣式。
• SQL: 操作資料庫必學。
• Golang: Google出品，簡單易用。
• Rust: 高效高效能，保證安全執行緒，防止聲明錯誤。
• Elixir: 開發擴充可持續的應用的動態函數式語言。

資料庫

• MySQL: 開源免費效能好，全世界都在用它。
• MariaDB: 日趨流行起來，同樣由MySQL的開發人員創造的資料庫。
• MongoDB: 非關資料庫，通常在MEAN/MERN架構中使用。
• Redis: 提升應用資料訪問效能，記憶體讀寫並可持久化儲存的資料庫。
• PostgreSQL: 功能強大完整，相容資料類型豐富，並且開源免費。

CSS前置處理器

• Sass: CSS的擴充，可以聲明變數，引入模組，嵌套屬性等等。
• Less: 為CSS添加聲明變數，樣式模組，命名空間，繼承等特性。
• Stylus: 寫CSS再也不用寫煩人的括弧啦～

代碼編輯器

• Atom: Github的發明，基於Web技術開發，漂亮又好用。
• Sublime Text: 最性感的代碼編輯器，你會因為愛上一款編輯器而愛上寫代碼。
• Notepad++: Win平台下開源好用的代碼編輯器，不需要裝什麼外掛程式就已經很棒啦。
• Visual Studio Code: 很多人也推薦並且喜歡用VS Code這款微軟出品的編輯器襖。
• TextMate: OSX上的一款比較火的編輯器。
• Coda 2: OSX平台，你可以在這款編輯器裡寫代碼、串連遠程FTP/SSH/資料庫，還能查詢手冊，代碼方法快捷查詢等等，一款編輯器滿足你寫網站的所有需求。
• WebStorm: JS開發利器。
• Vim: Vim是編輯器裡神一般的存在。
• Brackets: Adobe公司出品的一款編輯器，預覽功能很不錯。
• Emacs: 也有很多人喜歡支援Emacs啦。

Markdown編輯器

• StackEdit: 一款線上Markdown編輯器。
• Dillinger: 同上。
• Mou: Mac上一款非常棒的Markdown編輯器，不過據說作者重酬之後攜款跑路了？
• ulysses: 很棒的一款Markdown寫作軟體，可以產生為任何格式。

表徵圖庫

• Font Awesome: 全世界最流行的表徵圖庫。
• IconMonster: 線上免費表徵圖庫。
• Icons8
• IconFinder
• Fontello

版本管理應用

• SourceTree: 最好用的Git圖形化用戶端。
• GitKraken (Beta): 一款免費好用的全平台Git用戶端。
• Tower 2: 介面很好看。
• GitHub Client: Github官方案頭用戶端。
• Gogs: Go語言開發的可以自主搭建的開源託管平台。
• GitLab: 免費的私人項目Git託管。

本地開發環境

• XAMPP: 免費的 MariaDB, PHP, and Perl軟體集合安裝包。
• MAMP: 提供Mac上PHP開發運行環境。
• WampServer: Windows 下最好用的包含 Apache2, PHP MySQL 的開發運行環境。
• Vagrant: 虛擬機器軟體。
• Laragon: 喜歡Laravel的話，用這個最棒咯。

代碼差異檢查

• Diffchecker: 一款線上的檢查代碼異同的小工具。
• Beyond Compare: 檢查代碼修改差異的軟體。

線上編程

• JS Bin: 線上編寫並運行HTML/CSS/JS網頁代碼。
• JSfiddle: 同上。
• codeshare: 即時和其他開發人員共用你的代碼。
• Dabblet: 互動測試HTML/CSS代碼。
• Cloud9: 一鍵建立線上開發環境，完整的伺服器操作命令列，代碼線上編輯，項目線上運行，還可以分享連結給他人預覽，最重要的當然還是免費不要錢啦。

協作工具

• Slack: 團隊通訊應用。
• Teambition: 號稱最好用的團隊協作工具。
• Worktile: 一站式企業協同管理平台.

交流社區

• CodePen: 線上分享編寫你的前端代碼，推薦襖！
• Dribble: 設計師分享社區，靈感的源泉。

Web效能測試

• Website Speed Test: 網站載入速度測試。
• Google PageSpeed Insights: PageSpeed 是Google的網頁測試載入器，通過檢測評分給你最佳化建議。
• Google Chrome DevTools: Google開發人員工具。
• WebPageTest: 類比從世界各地載入你網頁的偵查工具。
• Pingdom
• GTmetrix

Web開發社區

• 掘金： 高品質的技術社區，國內算是最好的了。
• Stack Overflow
• Front-end Front
• Hashnode
• Refind
• Google+ Web Developers Group
• Google+ Web Developers Group
• Facebook WordPress Front-end Developers Group
• LinkedIn Web Design and Development Professionals Group
• LinkedIn Web Site Development Group
• LinkedIn PHP Developer Group
• LinkedIn WordPress Developers Group
• Webdeveloper.com
• Sitepoint Forums
• /r/perfmatters
• /r/webdev

「好好學習，天天向上」

2016 Web開發資源工具大搜羅