From zero to hero: Build cross-platform solutions with Angular 2

Targeting just the desktop or mobile as a single platform isn’t enough these days. Customers want to use all their devices to get their work done. As business application developers it’s time to address those demands by providing apps for all platforms, whether you think about mobile, desktop or the pure web. In this workshop Christian Weyer and Thorsten Hans will explain which architectural concepts and ideas will build up the foundation for your upcoming cross-platform application. Come and build such an application with Angular 2 and bring a single codebase to all desktop platforms (such as Windows Store, classic Windows Desktop, MacOSX and Linux), all mobile platforms (like iOS, Android and Windows Mobile) - and of course the web browser. Wanna get your hands dirty? Join our workshop!

Transcript

1. Thorsten Hans @thorstenhans Consultant Build cross-platform solutions with Angular 2 From zero to hero Christian Weyer @christianweyer Principal Consultant & CEO
2. Build cross-platform solutions with Angular 2 From zero to hero Thinktecture AG - http://thinktecture.com § Thorsten Hans § Microsoft MVP for Office 365 and Visual Studio § Focus on cross-platform solutions – Angular 2, and Electron § thorsten.hans@thinktecture.com § @thorstenhans § Christian Weyer § Microsoft MVP for ASP.NET § Google GDE for Web Technologies § Focus on cross-platform solutions – end-to-end § christian.weyer@thinktecture.com § @christianweyer Thorsten & Christian 2
3. Build cross-platform solutions with Angular 2 From zero to hero § Modern business applications § The Web: HTML5, CSS, {*}Script as a base § Angular 2: Smart client framework for the browser § Cordova: building mobile apps § Electron: creating desktop applications Topics 3
4. Build cross-platform solutions with Angular 2 From zero to hero § https://github.com/thinktecture/ngeurope-2016-workshop Workshop repository 4
5. Build cross-platform solutions with Angular 2 From zero to hero Modern business applications 5
6. Build cross-platform solutions with Angular 2 From zero to hero Mobile! Mobile! Mobile! https://medium.com/ben-and-dion/ode-to-the-desktop-232c6c6f14a7#.hg8xq4bu4 6
7. Build cross-platform solutions with Angular 2 From zero to hero Single-platform vs. multi-platform vs- cross-platform 7
8. Build cross-platform solutions with Angular 2 From zero to hero
9. Build cross-platform solutions with Angular 2 From zero to hero § Modern lifestyle, modern way of working § Data and processes need to be mobile, not just the devices we use § Reach is important § Boundaries are blurring – and will vanish § User experience will become an even more important part of software development § Facing new challenges § Building UIs with one technology approach § But optimized for certain platforms and/or form factors “Mobile-First” 9
10. Build cross-platform solutions with Angular 2 From zero to hero It’s a feature But that doesn’t look like a native application! Exactly. 10
11. Build cross-platform solutions with Angular 2 From zero to hero § Service-based architectures § Web / REST APIs § Use any platform server-side § Express or Restify § Jersey § ASP.NET Web API § Push Services § socket.io § SignalR § Consider Offline-first § Heavily influences your architecture and entire project Target architecture 11
12. Build cross-platform solutions with Angular 2 From zero to hero The web as a platform 12
13. Build cross-platform solutions with Angular 2 From zero to hero § Web browser & HTML5 as a powerful platform § JavaScript & TypeScript as application programming languages § Angular 2 as smart client application framework § Flexible layouts with CSS3 & flexbox Real applications 13
14. Build cross-platform solutions with Angular 2 From zero to hero § Client-side single page applications (SPA) § Features § Consequently component-driven § Metadata-driven § Tooling ecosystem § Focus on proven pattern and separation of concerns § Components, views, view models § Services and dependency injection Component-based applications with Angular 2 14
15. Build cross-platform solutions with Angular 2 From zero to hero § Angular 2 bets on TypeScript § Components are build as classes and described with metadata decorators Angular 2 & TypeScript @Component({ selector: 'game-details' templateUrl: 'game.html', }) export public class GameDetailsComponent { @Input() game: GameData; @Output() ended = new EventEmitter<GameData>(); … } … <game-details [game]="myCurrentGame" (ended)="onGameEnded($event)" > … 15
16. Build cross-platform solutions with Angular 2 From zero to hero Web & native platforms 16
17. Build cross-platform solutions with Angular 2 From zero to hero § Create real desktop applications from web apps § Similar to Cordova’s base idea § Target Windows desktop, macOS, and Linux § Marriage of Chromium and node.js § Independent of installed browsers on target machines § Does not need native SDKs to build final artifact § Access to native platform features § Electron API § Node modules ecosystem § Auto-updating and platform deployment Desktop applications with Electron 17
18. Build cross-platform solutions with Angular 2 From zero to hero Electron architecture 18 Desktop OS Electron Renderer Process (technically Chromium) Electron Main Process (technically Node.JS) MacOS Windows Linux Your Single Page Application Electron API Your custom Node.JS modules IPC Remote Node.JS
19. Build cross-platform solutions with Angular 2 From zero to hero § Toolkit and framework for building native application shells for our web apps § Make ‘app apps’ from ‘web apps’ J § Uses native web view components to host the original web app locally § Provides framework and APIs via plugins to interact with underlying native platforms § CLI tools for automating project creation & build § We always need the native SDKs (e.g. iOS, Android, Windows) Mobile apps with Cordova 19 JS HTML CSS Native wrapper Deploy to devices
20. Build cross-platform solutions with Angular 2 From zero to hero Cordova architecture 20 Mobile OS iOS Android Windows 10 UWP many more Cordova Application Cordova Plugins Geolocation Notifications Contacts Media Camera Custom Plugins HTML Rendering Engine (WebView) Single Page App HTML JS CSS Assets config.xml HTML APIs Cordova APIs OS APIs OS APIs Cordova Native APIs
21. Build cross-platform solutions with Angular 2 From zero to hero Cordova platform support 21 Android Blackberry 10 iOS Windows Phone 8 Windows (8.1 / 10, Phone 8.1) Cordova CLI MacOS, Windows, Linux MacOS, Windows, Linux MacOS Windows a Embedded WebView a x a x x Plugin Interface a a a a a
22. Build cross-platform solutions with Angular 2 From zero to hero § Build automation is important for effective development, testing and deployment § Gulp has been king for years § Large community § Lot of online resources § Many project experience § Webpack gains a lot of traction § Consider Angular CLI § Still evolving § Closed architecture by design Build process 22
23. Build cross-platform solutions with Angular 2 From zero to hero “Write once, run anywhere?” 23
24. Build cross-platform solutions with Angular 2 From zero to hero § Initiative led by Google § For roots in spring 2015 § Others are joining § Mozilla § Microsoft § Apple… ? § One goal: get rid of native apps & improve conversion rate § It is still very early § Watch the movement § Be sure you cannot target all the platforms any time soon § Maybe some day we will no longer need those ‘uber polyfills’ – aka Cordova and Electron Side note: Progressive web apps 24
25. Build cross-platform solutions with Angular 2 From zero to hero § Angular § https://angular.io § https://angular.io/docs/ts/latest/ guide/architecture.html § Bootstrap § http://getbootstrap.com/ § WinJS § http://try.buildwinjs.com/#angular § Material § https://material.angularjs.org § Cordova § http://cordova.apache.org/ § Electron § http://electron.atom.io/ § Gulp § http://gulpjs.com/ § Webpack § https://webpack.github.io/ § Angular CLI § https://cli.angular.io/ Resources 25