摘要
Google技術經理陳亮將為大家介紹TypeScript和Angular是什麼以及如何利用TypeScript和Angular進行移動端的跨平臺介紹。
內容來源:2017年7月15日,Google Engineering Manager陳亮在“2017 JavaScript中國開發者大會”進行《TypeScript, Angular, 和移動端的跨平臺開發》演講分享。IT 大咖說作為獨家視訊合作方,經主辦方和講者審閱授權釋出。
閱讀字數:2027 | 3分鐘閱讀
What’s TypeScript?
TypeScript是凌駕於ES5、ES6,具備靜態型別的JavaScript的超集。它為我們帶來的優勢包括未來JavaScript的一些特徵在TypeScript裡都有。並且它有一個非常強大的型別系統,通過這個強大的型別系統,能夠和IDE進行很好的整合。
TypeScript在2012年的時候做了釋出,當時的創始人Anders HejIsberg是微軟的一個架構師,用他的話來說,TypeScript makes JavaScript scale.當我們用TypeScript來寫程式的時候,我們做更多的模版擴充套件,擴充套件software,能夠有更強的可讀性。同時我們看到的一些介面也會更加明瞭,對於我們的開發有很大幫助。當我們用TypeScript來寫程式的時候,可讀性得到了大量的提高,所有的API介面更清晰明瞭,以幫助我們更好的擴充套件龐大應用的開發。TypeScript的研發理念也希望我們無論在什麼瀏覽器、什麼工作系統上都能執行一個穩定可延性強的語言。
TypeScript Type System
TypeScript自帶了一個編譯器,通過一些簡單的配置tsconfig.json就可以把TypeScript轉換成ES5或ES6。它除了進行基本型別的檢測之外,還能幫我們做一些重構。
當一個變數的型別改變了之後,很有可能在專案裡其它地方也需要改動。它的tsc的compiler可以幫助我們修改,不用手動去改每個地方。
雖然TypeScript希望大家儘量在每個地方都能標註它的型別,但其實這個型別是可選的。原因有兩個,其中一個原因就是當我們需要和很多其它第三方程式庫進行整合的時候,我們並不能保證它有這個型別的定義。另一個原因就是TypeScript對於很多開發團隊來說還是比較新的,很多時候需要逐步地更改project來和TypeScript進行整合,所以它在設計的時候就已經把這個考慮進去了。
現在很火的三個框架都和TypeScript進行了整合,它們的型別定義在網上都可以下載。
TypeScript Typing
TypeScript本身其實有一些非常細微但很有用的機制,這些機制可以幫助我們在寫前端程式碼的時候更加有效。
StrictNullCheck可以防止在整個流程中出現常見錯誤。
對於開發者來說我們很多時候需要一定的控制,TypeScript提供了型別的轉換和型別的斷言。
在TypeScript裡有一個非常特別的型別叫any,用於描述我們在編譯時的未知型別Type。
TypeScript Type Definition
真正使TypeScript強大的還是要歸根於型別定義檔案。型別定義檔案裡有介面、函式定義等等。在一般的前端構造裡,瀏覽器和DOM有非常多的型別。
當你在用npm去安裝這些模組的時候,假如它已經具備了這些型別的定義,那麼編輯的環境就可以馬上意識到,幫助你在程式設計過程中做到自動完成的功能,有效的提高了開發者的效率。
Why Angular?
速度和效能是選擇Angular的重要原因之一。
Angular很強大的一點在於他的模板編譯是跨平臺的,和傳統的DOM做了一個脫鉤的理念,讓使用者介面能更好的的呈現在使用者面前。另外Angular 的強大選染引擎也在應用最終釋出的時候能把APP壓縮到是原來的60%左右。
Angular從一開始構建的時候就非常注重Scalability。在Google內部,當一個工程師改了一行Angular程式碼的時候有成千上萬的單元測試都會被執行。我們希望平臺是一個穩定的平臺,新出的版本不會破壞以前現有產品的開發。
Angular還有三個支柱,一個是核心,一個是圍繞核心衍生出的程式庫,還有一個是工具。
Angular Core
鑑於我們現在的渲染器完全脫離了DOM,這樣的渲染讓我們的表達非常expressive。不管是元件、指令、內容投放還是“管道”都能讓我們的開發者更方便地去描述想要做的事情。
還有就是依賴注入,這個對於寫過很多單元測試的朋友應該不陌生。它能幫助我們在Angular元件裡去更好地和服務以及內部一些API進行連線,我們作為開發者就不用太過擔心怎樣管理這樣的一些關係。
Zones是非同步處理的執行環境。我們的程式裡有很多非同步的一些事件或函式,Zones會直接把它進行復寫,複寫之後通過對事件和函式的監測,能更有效的提高模板區域性更新的速度。
Angular的變化檢測跟很多前端框架一樣,有一個模版需要被渲染,渲染的時候內部元件有一個物件的改變,就需要進行檢測。
在Angular裡面有一個非同步執行的context,它複寫了所有非同步的函式和事件,當每次結束的時候都需要在每個元件裡做一個變化的檢測。
Angular Animation
Angular的動畫是基於standard Web Animation的API,所以它可以利用到很多瀏覽器自帶的硬體加速對它進行支援,讓它跑得更快。
Angular Tooling
Angular的工具也很強大,有AOT、Angular Universal和Angular CLI幫助大家去快速開發專案。
Future:Smaller,Faster,Easier to Use
Angular的下一代是Angular5,在今年稍晚就會推出。它的理念是讓整個框架容量更小,在各個平臺上跑得更快,各租件和API更通俗明瞭,容易上手。
Native Script
NativeScript是一個提供runtime編譯轉碼的執行層框架,可以讓你的JavaScript和Angular模板直接轉化成相對應的原生函式和租件。每一個元素都會最終成為一個原生的元素,而因為它用的是Angular的語法,廣大的前端開發同學們可以很熟悉的上手,一目瞭然。NativeScript在執行過程時,用Angular的渲染器去編譯模板,parse把它轉換成protoview,protoview再經過Native Script run-time把它轉換成原生的控制元件。
每一個元素都會最終成為一個原生的元素。要注意的是,它所有的語法和Angular是一樣的,所以在渲染的過程中不會有任何問題。
Native Script渲染
用Angular的渲染器去編譯XML,prase完成後,編譯器會把它轉換成protoview,protoview再經過Native Script run-time把它轉換成原生的控制元件。
我覺得今天給大家展示的還只是一些毛皮,我建議大家一定要看看TypeScript,因為它能幫助大家寫出更好的程式。今天很高興能和大家分享Google的一些技術,也希望大家能多多思考一下前端未來的發展,謝謝大家!