Typescript, Angular, 和移动端的跨平台开发 Ryan Chen 陈亮, Engineering Manager Chromecast and Home, Google ## TS A ionic N ## TS ## What's TypeScript?  to your production application. - Detect template errors early. • Used by Mobile Frameworks: Ionic & NativeScript. - Tree Shaking: Remove any dead code not used in final bundle by WebPack. ## reload support • ng build --pod ☐ AOT ## A ## Future: Smaller, Faster, Easier to Use ## ionic N ## Why build mobile apps with Angular • Code and skill reuse. TypeScript • Search engine - crawl

Module,Route ➢ 第三块内容：Angular架构特色 依赖注入、数据绑定 第四块内容：UI库 Angular-Material, Prime-NG, ng2-bootstrap, ionic 第五块内容：参考资源推荐 ## 第一块：集成开发环境@angular/cli ## nodejs ## 2009 年，前端Big Bang! ## Tool Chains based on NodeJS currently available. PrimeNG has a largest number of components. Angular-Material2 from Angular team. Ionic is very popular. What if there is no ANSI C standard library? ## UI Libraries ## ANGULAR MATERIAL 强烈推荐：ng2-bootstrap ## 移动端开发神器  ionic，底层是NativeScript ## 第五块：参考资源推荐 ## 特别推荐：ng2-admin ![Image](/uploads/documents/6/1/8/5/6185e3afcbcd

AGNOSTIC HTML PARS E5 COMPILER PORT PROT O VIEW S PLATFORM SPECIFIC NIVES CRIPT REACT NATIVE IONIC 2 RENDER ER NATIVE VISUAL TREE PLATFORM SPECIFIC ELECTRON RENDERER DESK TOP TREE ↑ ## BUSINESS [Image](/uploads/documents/8/d/b/9/8db9ac5bcc659b52c457ba0296861a31/p52_2.jpg) ↑ NATIVESCRIPT / REACT NATIVE / IONIC 2 ↑ MOBILE UI DEFINITION ↑ DESKTOP APP ↑ ELECTRON DESIGN UI DEFINITION N ![Image](/upl

Cross Platform: one codebase for iOS and Android ## Not like PhoneGap/Cordova with Ionic Not like PhoneGap/Cordova with Ionic No DOM to manipulate No HTML elements styled like native components → Real native

原生接口的桥梁。 • ionic • onsen.io 原生混合移动开发Webview环境/平台/工具（例如：浏览器引擎驱动）： 这些解决方案一般使用Cordova、crosswalk、或自定义WebView作为使用原生接口的桥梁。 • Adobe PhoneGap [$] • AppBuilder[\$] • cocoon.io [免费$] • ionic hub [免费$] •

移动跨平台方案 |技术类型|UI渲染方式|性能|开发效率|动态化|框架代表| |---|---|---|---|---|---| |H5+原生|WebView渲染|一般|高|支持|Cordova、Ionic| |JavaScript+原生渲染|原生控件渲染|好|中|支持|RN、Weex| |自绘UI+原生|调用系统API渲染|好|高|默认不支持|Flutter| ## Flutter简介 • Google

移动端需要完全从头开始开发吗？ - 代价太大了 - 它能利用已有的什么？ - 服务、前端业务逻辑 • Angular有哪些特性适合移动端开发？ – ngTouch • 还有更完善的选择吗？ — Ionic QCon ## 前端的工程化 - 一个软件系统，并不只是简单功能的堆砌 - 当规模扩大的时候，有一些边际效应 - 某个JS模块被修改，如何得知会影响谁？ - 某个界面片段被调整，会影响什么界面？

Native App Hybrid App Flutter (Dart) React Native (JavaScript) Fluter框架 RN框架 Xamarin (C#) ionic (TypeScript + Angular) Xamarin框架 ![Image](/uploads/documents/9/7/5/9/9759b17d7e21a748e9bd012e62deac92/p20_1

.jpg) ## References ## • Important References: • For setting up jupyter notebook on princeton ionic cluster https://oncomputingwell.princeton.edu/2018/05/jupyter-on-the-cluster/ • Best reference is

Touch 和 Apache Cordova/Phonegap 集成来实现AngularJS 使用 Trigger.io, Cordova/Phonegap integration, Ionic framework 来开发丰富和健壮的移动应用19.移动站点Sencha touch就是用来开发移动站点的AngularJS