讓你成為前端，後端或全棧開發程式設計師的進階指南，一門學到老的技術

智雲程式設計發表於2019-02-18
前端後端全棧程式設計師

你不需要學習所有的技術成為一個web開發者，這個指南只是通過簡單分類列出了技術選項。會介紹通用的知識, 最後介紹2019年的Web的一些趨勢。

1.基礎前端開發者

1.1 HTML & CSS
讓你成為前端，後端或全棧開發程式設計師的進階指南，一門學到老的技術

最基礎的知識:

  • 語義化的HTML元素
  • 基礎的CSS語法
  • Flexbox & Grid
  • CSS變數
  • 瀏覽器開發者工具
1.2 響應式佈局
讓你成為前端，後端或全棧開發程式設計師的進階指南，一門學到老的技術

響應式設計將不再是網頁的加分項, 而是必須的

  • 設定viewport
  • 非固定寬度
  • 媒體查詢
  • 使用 rem 替代 px
  • 移動優先,柱狀顯示
1.3 基礎的部署工作
讓你成為前端，後端或全棧開發程式設計師的進階指南，一門學到老的技術

學會如何部署一個靜態網站到伺服器

  • 註冊一個域名(NameCheap, Google Domains)
  • 管理共享主機或虛擬機器(Inmotion, Hostgator, Bluehost)
  • FTP, SFTP 檔案上傳(Filezilla, Cyberduck)
  • 靜態頁面託管(Netlify, Github Pages)
1.4 SASS前處理器
讓你成為前端，後端或全棧開發程式設計師的進階指南，一門學到老的技術

雖然不是必須的, 但是推薦去學, 基礎知識的掌握很簡單

  • 結構化CSS
  • 變數
  • 巢狀樣式表
  • Minxins & 函式
  • 繼承
1.5 原生JavaScript語法
讓你成為前端，後端或全棧開發程式設計師的進階指南，一門學到老的技術

不使用任何框架和庫區學習原生的JS語法

  • 資料型別, 函式, 條件判斷, 迴圈, 湊總府
  • DOM操作和事件
  • JSON
  • Fetch
  • ES6+(箭頭函式, Promise, async/await, 解構)
1.6 滿足了基本的前端開發者的條件
讓你成為前端，後端或全棧開發程式設計師的進階指南，一門學到老的技術
  • 構建靜態站點
  • 構建UI佈局(拿到設計圖能夠使用HTML/CSS還原)
  • 新增一些互動功能
  • 部署和維護網站

現在能找到最低水平的Web開發工作, 但是這是遠遠不夠的....

2.一個成熟的前端開發者

2.1 HTML & CSS框架
讓你成為前端，後端或全棧開發程式設計師的進階指南，一門學到老的技術

HTML/CSS框架目前沒有以前那麼有意義, 但是我還是介意你選擇一個學習(這裡作者想隱射的應該是, 在jquery時代, HTML/CSS框架的學習是必須的).

  • BootStrap
  • Materialize
  • Bulma
2.2 Git和其他工作流工具
讓你成為前端，後端或全棧開發程式設計師的進階指南，一門學到老的技術

Git絕對是每一個Web開發者必須掌握的工具, 這裡也有一些其他的工作流工具的建議.

  • 基礎的命令列(touch, cd, mkdir什麼的總得會, 命令列在下面的工具中都會用到)
  • Git(版本控制)
  • NPM 或 Yarn(包管理)
  • Webpack 或者 Parcel(打包工具)
  • Gulp 或者 Grunt(任務管理和構建工具)
  • 編輯器外掛(ESLint, Prettier, Live Server等)
2.3 前端框架
讓你成為前端，後端或全棧開發程式設計師的進階指南，一門學到老的技術

學習一個前端框架在目前前端開發中是必須的，三選一：Vue, React, Angular.

  • 在大公司開發中非常流行
  • 更多的互動 & 有趣的UI元件
  • 元件化 & 模組化前端程式碼
  • 對團隊有利
2.4 狀態管理
讓你成為前端，後端或全棧開發程式設計師的進階指南，一門學到老的技術

對於使用框架的大型前端專案, 你也許需要使用狀態管理工具去管理你的應用級的狀態

  • Redux(Context API)
  • Apollo(GraphQL Client)
  • Vuex
  • NgRx
2.5 滿足一個成熟的前端開發者條件
讓你成為前端，後端或全棧開發程式設計師的進階指南，一門學到老的技術
  • 構建一個優秀的前端應用
  • 流暢和穩定的前端工作流
  • 多人開發 & 熟練使用Git
  • 請求後端API & 前端資料響應

滿足以上條件, 你能夠順利的找到一個前端的工作並乾得很出色~

3.全棧開發工程師

3.1 學習一門後端語言
讓你成為前端，後端或全棧開發程式設計師的進階指南，一門學到老的技術

成為一個全棧工程師或軟體工程師, 你將需要學習一個服務端語言和相關技術

  • Node.js
  • Python
  • PHP
  • C#
  • Go

學習的順序:

  • 基礎的後端語言語法
  • 資料結構和工作流
  • 包管理
  • HTTP/路由
3.2 服務端框架
讓你成為前端，後端或全棧開發程式設計師的進階指南，一門學到老的技術

不要重複造輪子, 學習一門框架去構建更好和更快的應用

  • Node.js(Express, Koa, Adonis)
  • Python(Django, Flask)
  • PHP(Laravel, Symfony)
  • C# (ASP.NET)
3.3 資料庫
讓你成為前端，後端或全棧開發程式設計師的進階指南，一門學到老的技術

絕大多數覺得應用都會使用到資料庫, 這裡有一些選擇:

  • 關係型資料庫(MySQL, PostgreSQL, MS SQL)
  • 非關係型資料庫 (MongoDB, Counchbase)
  • 雲服務 (Firebase, AWS, Azure, DocumentDB)
  • 輕量級(SQLite, NeDB, Redis)
3.4 服務端渲染
image
image

像React, Vue 和 Angular等端架都可以進行服務端渲染

  • Next.js(React)
  • Nuxt(Vue)
  • Angular Universal(Angular)
3.5 內容管理系統
讓你成為前端，後端或全棧開發程式設計師的進階指南，一門學到老的技術

內容管理系統允許快速開發併為您的客戶提供更新內容的能力. 在你需要快速開發網站的時候, 它們是很適合的. 特別是對於自由開發者.

  • 基於PHP的 (Wordpress, Drupal)
  • 基於JS的 (Ghost, Keystone)
  • 基於Python的 (Mezzazine)
  • 基於.Net的 (Piranha, Orchard CMS)
3.6 DevOps 和部署
讓你成為前端，後端或全棧開發程式設計師的進階指南，一門學到老的技術

學習語言和框架是一回事, 但是安裝環境, 測試和部署有事另外一回事

  • 部署 (Linux, SSH, Git, Nginx, Apache)
  • 平臺 (Digital Ocean, AWS, Heroku, Azure)
  • 視覺化(Docker, Vagrant)
  • 測試 (單元測試, 整合測試, 函式式測試, 系統測試)
3.7 滿足全棧工程師的條件
讓你成為前端，後端或全棧開發程式設計師的進階指南，一門學到老的技術
  • 設定全棧的開發環境和工作流
  • 構建後端服務API和微服務
  • 資料庫操作
  • 能夠獨立開發應用(前端和服務端)
  • 部署到雲端(SSH, Git, Servers等等)

4.2019技術趨勢和其他

4.1原生應用開發
讓你成為前端，後端或全棧開發程式設計師的進階指南，一門學到老的技術
  • React Native(使用React構建原生應用)
  • NativeScirpt(Angular, Typescript, JavaScript)
  • Ionic (HTML/CSS/JS 實現混合應用)
  • Flutter (使用Dart語言開發原生應用的移動端SDK)
  • Xamarin (使用C#開發的移動端應用)
4.2 使用Electron開發桌面應用
讓你成為前端，後端或全棧開發程式設計師的進階指南，一門學到老的技術

Electron是一個使用JavaScript構建跨平臺的桌面應用工具.

  • 使用到了 Chromium核心和Node.js
  • 相容Windows, Mac & Linux
  • 崩潰報告, 除錯和效能分析
4.3 GraphQL & Apollo
讓你成為前端，後端或全棧開發程式設計師的進階指南，一門學到老的技術

GraphQl是對於API的一種革命性新方法，查詢語言比標準RESET嚴格得多

  • 只查詢你想要的東西
  • 前端和後端可以合作得更為順利
  • 查詢語句非常簡單且很像JSON語句
  • Apollo是一個傳送請求到GraphQL的客戶端
  • 使用的是Gatsby靜態站點生成器
4.4 TypeScript
讓你成為前端，後端或全棧開發程式設計師的進階指南，一門學到老的技術

TypeScript是一個JavaScript的超集, 它新增了靜態型別等很多特性.

  • 變數, 函式等型別
  • 類
  • 其他ES6的特性
  • 在Angular中被使用到, 同時也可以在React和Vue中被使用
4.5 無服務架構
讓你成為前端，後端或全棧開發程式設計師的進階指南，一門學到老的技術

無需建立和管理自己的伺服器

  • 使用第三服務執行“無伺服器功能”
  • 例如 AWS, Netify & Firebase
  • 在Gatsby靜態站點生成器很流行
  • 無服務框架
4.6 AI和機器學習
讓你成為前端，後端或全棧開發程式設計師的進階指南，一門學到老的技術

AI和機器學習已經被廣泛應用在所有的程式和技術中, 甚至包括web開發中.

  • 機器學習可以允許Web應用程式隨時間進行調整
  • 雖然AI還有很長的路要走, 但是我們會看到它會更多的用在web中
  • 雖然目前絕大多數都是Python寫的, 但也有Tensorflow.js和Brain.js這些JS的庫
4.7 區塊鏈技術
讓你成為前端，後端或全棧開發程式設計師的進階指南，一門學到老的技術

現在許多公司使用區塊鏈技術進行數字交易, 因為它們更安全和有效率.

  • Solidity(一門智慧合約的程式語言)
  • Mist(以太坊開發的瀏覽器, 用於傳送交易和合約)
  • 比特幣API(可以構建app和整和比特幣的區塊鏈開發)
4.8 PWA
讓你成為前端，後端或全棧開發程式設計師的進階指南，一門學到老的技術

Progressive Web Apps是一個web app但是在功能和樣式上給使用者帶來原生應用使用體驗的一項技術.

  • 響應式
  • 在離線環境下也能夠提供服務
  • 類似App的互動
  • HTTPS
  • 可靠, 迅速, 更好
4.9 Web Assembly
讓你成為前端，後端或全棧開發程式設計師的進階指南，一門學到老的技術

類似彙編的二進位制格式的程式碼可以被瀏覽器執行. 可以使用類似C/c++和Rust等高階語言進行編寫.

  • 比JavaScript執行效率快
  • 更安全 - 強制的瀏覽器同源和安全協議
  • 開放 & 可除錯

自己是從事了五年的全棧工程師，不少人私下問我，2019年前端該怎麼學，如何進階到全棧？

沒錯，年初我花了一個多月的時間整理出來的學習資料，希望能幫助那些想好前端，進階全棧的小夥伴

這裡推薦一下我的前端學習交流群：731771211，裡面都是學習前端的從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴。2019最新技術，與企業需求同步。好友都在裡面學習交流，每天都會有大牛定時講解前端技術!

點選： 加入


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2636319/，如需轉載，請註明出處，否則將追究法律責任。

相關文章