Real Cross-Platform: Can HTML5, AngularJS, Cordova & Co. Do It for Clients?

Transcript

1. Real  Cross-­‐Platform Can  HTML5,  AngularJS,  Cordova  &  Co. Do  It  for  Clients? Christian Weyer Thinktecture AG christian.weyer@thinktecture.com
2. Christian  Weyer • Co-­founder,  co-­owner and principal consultant at  Thinktecture AG • Focus  on – Mobile  &  web-­based  application  architectures – Interoperability,  cross-­device – Pragmatic  end-­to-­end  solutions • Microsoft  MVP  for ASP.NET  (Architecture) ASP.NET  Web  API  /  vNext Advisory  Board  Member ASPInsider,  AzureInsider • Google  GDE  for AngularJS • http://blogs.thinktecture.com/cweyer christian.weyer@thinktecture.com @christianweyer 2
3. Talking  Points • Modern  business applications – real  cross-­platform • Target  architecture • HTML5,  CSS,  JavaScript  &  AngularJS • Cordova for mobile  apps • nw.js  for desktop applications • Automation  via  build process 3
4. Modern  Applications Cross  platform !=  Mobile Mobile-­First  !=  Phones &  Tablets 4
5. Cross  Platform? 5
6. Mobile-­first • Today:  focus on  mobile  devices &  apps • But  what is mobile-­first,  anyway? – Mobile  lifestyle &  work – Data  &  processes travel – Reach • We need UX  &  technologies to realize the Continuous Screen – Adaptive  user interfaces with optimized user experience – Ideally,  with one code base &  target architecture 6
7. „Write  once,  run anywhere – v2“  ? 7
8. Target  Architecture Groundhog day: „Hey  babe,  I  got you babe…“ 8
11. 11 Client Server HTTPS
13. Web-­based Application Technologies „I  didn‘t know I  can do  that!“ 13
14. HTML5  as  a  Platform • HTML5  ~= Semantic  markup  +  CSS3  +  JavaScript • An  application  development  platform 14
15. JavaScript  +  Markup  +  CSS3 • JavaScript  as application language – Or TypeScript for – well…  -­ types • AngularJS as application framework: MVVM  &  components – Alternatives   like  EmberJS,  KnockoutJS;;  ReactJS • UX:  Common-­base  layout system – Bootstrap  or more app-­like  UX  frameworks like WinJS or Material 15
16. „I  didn‘t  know  that!“ • We can build large-­scale applications with JavaScript • We can have IntelliSense  with JavaScript • We can debug &  profile JavaScript • We can use JavaScript  for real-­time  3D • We can have a  fresh look at  JavaScript – Upcoming ECMAScript6   is a  big leap forward – TypeScript accepted by competitors 16
17. MVVM  &  Components  with AngularJS • AngularJS is a  client-­side JavaScript  SPA   framework – Tries to take away complexities – Prepares the way for component-­based apps • Focus  on  separation of concerns with patterns – Dependency injection &  Services – ViewModels – Views – Directives 17
18. Web  going native Use the best from both worlds. 18
19. Native  Web-­based  Mobile  Apps:  Cordova • Framework  &  tools  to  create  native  apps  from   HTML5/JS  codebase – Wrapping  your  HTML5  code  into  native  app  shell – Hook  into  platform  features  &  events  with  APIs – Extend  app  functionality   with  plugins • CLI  tools  for  project  automation • Still  needs  native  SDKs 19
20. Platform  support 20 http://cordova.apache.org/docs/en/edge/guide_support_index.md.html#Platform%20Support
21. Native  Plugins • Plugins  are  composed  of – Single  JavaScript  interface  used  across  all   platforms – Native  implementations   with  platform-­specific   plugin  interfaces • Installation  via  CLI • Configuration  via  config.xml • AngularJS  integration  via  ng-­cordova 21
22. Visual  Studio  Tools  for Apache  Cordova • Built-­in  support in  Visual  Studio  2015 • Easy  to setup – Takes  care  of all  necessary dependenices in  one installer • Offers project template to integrate with Cordova • Debug Windows  Store,  Windows  Phone,   Android,  and iOS  straight from VS 22
23. Going  Desktop  with  nw.js • Aka  node-­webkit • Allows for similar approach as Cordova but   aiming at  desktop applications – Windows,  Linux,  MacOS  X • Uses specific version of Chromium and node.js/io.js – Deploy independent from installed browsers 23
24. Debugging  Cordova • Native  IDEs  to  debug  plugin  code • Safari  Web  Inspector  or  Google  Chrome  to   debug  HTML5/JS  code – On  simulator/emulator   or  device • Other  remote  debugging  tools  like  Weinre (local/Cloud)  available 24
25. Debugging  nw.js • Chrome  debugging  tools  can  be  accessed   from  within  application  container – Via menu – Via  API 25
26. End-­to-­End  Process Automating the goodness. 26
27. Automation  with  gulp  &  Co. • Develop,  test  &  debug  in  browser  (primarily) • Build  native  apps  with  gulp  tasks  using   Cordova  CLI  &  nw.js  commands • One  HTML5  code  base  results  in  various   platform  binaries – „With  a  single  mouse  click“  – erm:  batch  file  J 27
28. Summary 28
29. Summary • Cross  platform !=  Mobile, Mobile-­First  !=  Phones/Tablets   • HTML/JavaScript-­based frameworks like AngularJS enable real  applications based on  browser technologies • Cordova &  nw.js  offer platform &  tools for native integration &  deployment • Secure  target architecture with Web  APIs, Push  services and authorization servers as a  base 29
30. Resources • AngularJS – https://angularjs.org/ • win.js – http://try.buildwinjs.com/#ang ular • Material – https://material.angularjs.org • Cordova – http://cordova.apache.org/ • ng-­cordova – http://ngcordova.com/ • nw.js – https://github.com/nwjs/nw.js • Gulp – http://gulpjs.com/ • CefSharp – https://github.com/cefsharp/ CefSharp 30
31. Contact • Christian  Weyer ThinktectureAG • christian.weyer@thinktecture.com • @christianweyer 31
32. Thank  You  Sponsors!