Taro 是什么？

Taro 是由京東 - 凹凸實驗室打造的一套遵循 React 語法規(guī)范的多端統(tǒng)一開發(fā)框架。

現如今市面上端的形態(tài)多種多樣，Web、App 端(React Native)、微信小程序等各種端大行其道，當業(yè)務要求同時在不同的端都要求有所表現的時候，針對不同的端去編寫多套代碼的成本顯然非常高，這時候只編寫一套代碼就能夠適配到多端的能力就顯得極為需要。

使用 Taro，我們可以只書寫一套代碼，再通過 Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信小程序、H5、App 端等）運行的代碼。同時 Taro 還提供開箱即用的語法檢測和自動補全等功能，有效地提升了開發(fā)體驗和開發(fā)效率。

Taro 能提供什么？

一次編寫，多端運行

既然是一個多端解決方案，Taro 最重要的能力當然是寫一套代碼輸出多端皆可運行的代碼。目前 Taro 已經支持一套代碼同時生成 H5 和小程序，App端(React Native)端也即將支持，同時諸如快應用等端也將得到支持。

同時 Taro 也已經投入到了生產環(huán)境使用，目前已經支撐了一個 3 萬行代碼小程序 TOPLIFE 的開發(fā)和部分京東購物小程序，未來也將會支撐更多的京東核心業(yè)務小程序。

現代前端開發(fā)流程

和微信自帶的小程序框架不一樣，Taro 積極擁抱社區(qū)現有的現代開發(fā)流程，包括但不限于：

NPM 包管理系統(tǒng)ES6+ 語法自由的資源引用CSS 預處理器和后處理器（SCSS、Less、PostCSS）

對于微信小程序的編譯流程，我們從 Parcel 得到靈感，自研了一套打包機制將 AST 不斷傳遞，因此代碼分析的速度得到了很大的提高。一臺 2015 年 的 15寸 RMBP 在編譯上百個組件時僅需要大約 15 秒左右。

和 React 完全一致的 API 和組件化系統(tǒng)

在 Taro 中，你不用像小程序一樣區(qū)分什么是 App 組件，什么是 Page 組件，什么是 Component 組件，Taro 全都是 Component 組件，并且和 React 的生命周期完全一致。可以說，一旦你掌握了 React，那就幾乎掌握了 Taro。而學習 React 的資源也幾乎是汗牛充棟，完全不用擔心學不會。

Taro 和 React 一樣，同樣使用聲明式的 JSX 語法。相比起字符串的模板語法，JSX 在處理精細復雜需求的時候會更得心應手。

良好的開發(fā)效率和體驗

鑒于 Taro 的語法和 React 完全一樣，因此編輯器/IDE 能夠對 Taro 的支持和 React 是幾乎一樣的。現代的編輯器默認都對 JSX 進行了支持，如果沒有，找一個插件也是非常容易的事情。但畢竟我們做 Taro 就是為了提升開發(fā)效率和開發(fā)體驗，而真正使用 Taro 的人就是我們自己或正坐在我們旁邊的同事。因此在此基礎上，我們又對 Taro 開發(fā)體驗進行了進一步加強。

自定義 ESLint 規(guī)則

我們之前提到過，當學會了 React，其實也差不多會 Taro 了。其中很重要的一個原因就是我們對 Taro 不支持的語法和特性單獨寫了 ESLint 規(guī)則：開發(fā)者只管寫代碼，寫到不支持的語法/特性編輯器會報錯，并給出報錯信息和一個文檔地址描述。

類型安全和運行時檢測

JSX 的本質就是 JavaScript 的語法增強，所以例如沒有 import 組件等語法錯誤在編譯期就能發(fā)現。開發(fā)者也可以使用 TypeScript 或 Flow 來對代碼的可靠性進一步增強，或使用 PropsType 在運行時進一步保障代碼的魯棒性。

高效的自動補全和 ES6+ 語法

Taro 的所有 API（包括微信小程序等端能力接口）都有智能的提醒和自動補全，包括接口的參數和返回值。

Taro 的設計思路

我們的初心就是做一款能夠適配多端的解決方案，結合業(yè)務場景、技術選型和前端歷史發(fā)展進程，我們的解決方案必須滿足下述要求：

代碼多端復用，不僅能運行在時下最熱門的 H5、微信小程序、React Native，對其他可能會流行的端也留有余地和可能性。完善和強大的組件化機制，這是開發(fā)復雜應用的基石。與目前團隊技術棧有機結合，有效提高效率。學習成本足夠低背后的生態(tài)強大

同時滿足這幾個需求并不容易，在我們經過充分地調研和思考之后發(fā)現只有 React 體系能夠滿足我們的需求。而對于微信小程序而言，使用 React 完全沒有辦法進行開發(fā)——直到我們從 codemod 得到靈感：

在一個優(yōu)秀且嚴格的規(guī)范限制下，從更高抽象的視角（語法樹）來看，每個人寫的代碼都差不多。

也就是說，對于微信小程序這樣不開放不開源的端，我們可以先把 React 代碼分析成一顆抽象語法樹，根據這顆樹生成小程序支持的模板代碼，再做一個小程序運行時框架處理事件和生命周期與小程序框架兼容，然后把業(yè)務代碼跑在運行時框架就完成了小程序端的適配。

對于 React 已經支持的端，例如 Web、React Native 甚至未來的 React VR，我們只要包一層組件庫再做些許樣式支持即可。鑒于時下小程序的熱度和我們團隊本身的業(yè)務側重程度，組件庫的 API 是以小程序為標準，其他端的組件庫的 API 都會和小程序端的組件保持一致。

技術選型與權衡

在我們前面社區(qū)已經有多個優(yōu)秀的框架以小程序為核心對多端適配進行了探索，我們將各個開發(fā)框架的主要特點和特性進行了對比并制成圖表。大家可以結合團隊技術棧、技術需求以及框架特點、特性進行選型和權衡。

結語

經過數個月的開發(fā)，Taro 從第一次 commit 到發(fā)展成包括 16 個包，十多位同學共同參與的大型項目。與此同時，Taro 也在生產環(huán)境支撐了數個復雜業(yè)務線上項目的開發(fā)，將來也會支撐更多的京東業(yè)務。

Taro 的技術方案和實現也根植于社區(qū)，我們也希望為技術社區(qū)的發(fā)展壯大貢獻一份自己的力量。秉持著京東凹凸實驗室長久以來開源、開放、共享的優(yōu)良傳統(tǒng)，我們今天將 Taro 全部代碼開源，為廣大開發(fā)者快速開發(fā)多端項目提供一整套技術解決方案。未來，我們也將繼續(xù)拓展 Taro 現有能力，支持更多端能力，繼續(xù)完善開發(fā)者體驗，提高開發(fā)者效率，幫助更多開發(fā)者，同時也從社區(qū)中汲取養(yǎng)分，讓 Taro 變得更加強大。

基本上是用JAVA開發(fā)的，也有用php

因為現在京東商城的網站訪問量急劇增加，現有.NET技術構架已經不能應對大規(guī)模的并發(fā)訪問量，從前年的“秒殺”促銷活動到今年的“搶購”促銷活動，大訪問流量已經將京東商城的服務器沖垮過很多次了，貌似服務器增加了幾倍都沒有解決這個問題，所以只能更系統(tǒng)了，因為JAVA語言的穩(wěn)定性要強過.NET技術，所以現在京東商城已部分轉移至了JAVA，預計以后會全面的轉向JAVA構架的。

高貴的前端程序猿們：

如何在前端開發(fā)這種高精尖的技術領域找到心儀的工作？實現在咖啡館喝喝咖啡敲敲代碼就能升職加薪、買房買車、迎娶白富美走上人生巔峰的職業(yè)夢想？這篇《進化論：從 0 到 100，前端猿茁壯成長的精神飼料史》，肯定能給你事業(yè)的加速動力。

前端開發(fā)工作已經變的越來越復雜，僅僅是想羅列一份前端開發(fā)的學習列表就已經是一件艱巨的工作。曾經只要會編寫 HTML, CSS 和 Javascript 就是能夠找到一份前端開發(fā)工作的全部要求。而現在，web 開發(fā)遠遠不止是簡單編碼。因為我們的互聯網上有了更多的內容，也因為有更多的人、更多設備可以訪問互聯網, web 前端開發(fā)技能也就更多了。我們現在需要考慮的問題很多，比如載入時間，性能，不同的屏幕尺寸, 不同的輸入方式, build 系統(tǒng), 部署策略，還有如何組織好我們的代碼。

這還是想象中前端開發(fā)么？好吧其實只要你有熱情，這些還是很有趣的，現在就來仔細看看，一份前端開發(fā)的工作，到底需要你準備些什么?

入行行頭：5 大硬件

請準備好以下東西

一顆人類的大腦：智商在平均水平線以上即可一份強烈的渴望：我的代碼要可以運行在任何一個有瀏覽器的設備上。一臺筆記本電腦：不需要花費很多錢得那種，只要它可以運行 Windows, Mac OS X, 或 Linux 系統(tǒng)。當然你也可以只用一臺臺式機，但是那樣就不能帶著它坐在咖啡館里…一個文本編輯器：可以推薦的比如 Atom,Visual Studio Code, TextMate, 它們都有在 Mac OS, Windows 的免費版本，什么還有 Sublime, WebStorm? 啊，那些都很流行，不過需要需要一筆不少于 70 美元的花費…一個代理：這個大家都懂的，我就不解釋了

初級資質要求

一些專業(yè)基礎

你需要學會瀏覽器能理解的三大語言：HTML, CSS, Javascript – 神圣的三位一體！

非常重要的一點是，一定要理解這三大語言后再去學習別的，確保知道怎樣在各種尺寸的屏幕上排列好你的網頁，怎樣在一個按鈕被按下后 do something!

一些很有用的學習資源

Codeacademy: interactive, code-along tutorials (this site is the bomb btw)Web Development for Beginners: article from webplatform.org.MDN：https://developer.mozilla.org/en-US/docs/Web

中級進階路徑

一旦掌握了三大語言，就可以開始學習專業(yè)的開發(fā)流程啦：

Command line：好吧,命令行也許都會,但是要掌握最基本的操作,熟悉怎樣配置你的環(huán)境,還有那些奇怪的 shell 腳本，因為你會經常用到它們。CSS 已經不夠用了,我們有了 CSS 的預處理：Sass, LESS。知道如何搭建一個 build 系統(tǒng)：Gulp 或 Grunt 這類的構建任務腳本器,編譯 LESS 成 CSS, concatenating Javascript, minify 壓縮靜態(tài)資源, 選一個異步或同步的方式加載它們，然后一個好的 build 系統(tǒng)要能自動做到那些,包括一個本地的 web 服務器用于測試代碼。代碼版本管理，git。在 github 上分享你的代碼！部署! 讓你的網站上線。可以找一個免費的服務提供商，比如 heroku.com, https://pages.github.com

這些幾乎就是現代前端開發(fā)者會用到的工具和技術，好了，你現在可以成為一個前端開發(fā)工程師了。

高級炸裂裝備

你已經能夠為你的朋友的業(yè)務搭建一個網站了，簡潔的排版，高清大照片，你成功了，它甚至在你的手機都看著很棒。那么還有什么值得學的？

把你的網站和一個內容管理系統(tǒng) (CMS）集成在一起。一個 CMS 能夠讓你通過用戶界面增、刪、改、組織你的內容，不需要任何代碼。這就是那些博客網站如何工作的。比如免費的 WordPress，去熟悉一個開源的 CMS 吧，會很有用的。

學習怎樣搭建一個 CMS，意味著你講要熟悉一個服務器端的語言，比如 Node.js, 或 PHP，然后你還會想要知道怎樣和數據庫打交道，比如 MySql 或者 MongoDB。

來熟悉一種 Javascript 框架吧，這樣你可以真正的搭建一個交互出色的 web 應用，那真的很重要，比如 Angular, React, Ember。只要挑一個你喜歡的，但是一定要精通它。

Javascript design patterns，javascript 也有設計模式？ 是的，讀一下吧。

突破天際的大招

溝通技巧！你需要和你的小伙伴們溝通，他們是你的 coder 伙伴，你的老板，你的用戶，你的….stackoverflow.com， 有問題找 stackoverflow，擴展一下人脈把，上 meetup.com, 在博客上寫一些你的學習體驗， 在 Gitgub 貢獻一下你的 Pull request。

界面設計和用戶體驗設計 UI/UX design，前段開發(fā)的小伙伴需要具備基本的 UI/UX 設計知識。

搜索優(yōu)化，要知道怎樣提高網站的搜索排名，更容易被人們搜索到。

CSS 過度效果，給你的按鈕寫一個 hover 的 CSS 動畫，還有你的從右邊滑入的導航菜單也需要一個平滑的動畫。

關于性能，讓你的網站盡可能快的被加載，減少 DOM 的 reflow 和 repaint 操作，防止?jié)L動性能瓶頸，優(yōu)化 Javascript, 讀一讀這個吧 google web developer fundamentals。

用一些測試框架來實現 Javascript 單元測試，比如 Jasmine，QUnit。

持續(xù)集成 Continuous integration (CI)，知道怎樣配置一套和伙伴們一起使用的自動測試和部署的工具，比如 CircleCI, Travis CI, Jenkins.

超好用的其他加成技能

↓↓↓這些并非必須，但能幫你脫穎而出：

用 CSS3, SVG, Canvas API 實現動畫。

后端開發(fā)， Node.js

最后：去找工作吧！

有了技能是不夠的，你需要能展示它們，你還能干的是：

搭建一個小網站，公開你的 gitub 代碼庫，確保你的代碼和文檔清楚漂亮，還有一份 README去 meetup.com 找你的老板或者投資人吧，開一個博客，申請一個 linkedin 帳號因為 web 技術總是在變化，最后，即使找到了一份稱心的工作，還是需要 stay motivated, 你需要時常去下面這些地方轉轉：CSS Tricks，SitePoint，Smashing Magazine當然還有些像 CSDN 這樣中文社區(qū)，總之遇到任何難題，社區(qū)里有總有樂于助人的。保持好的職業(yè)態(tài)度：Stay humble, and build cool shit