Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Christian Weyer

October 15, 2015
Tweet

More Decks by Christian Weyer

Other Decks in Programming

Transcript

  1. 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 [email protected] @christianweyer 2
  2. 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
  3. 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
  4. 9

  5. 10

  6. 12

  7. HTML5  as  a  Platform • HTML5  ~= Semantic  markup  +

     CSS3  +  JavaScript • An  application  development  platform 14
  8. 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
  9. „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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. Debugging  nw.js • Chrome  debugging  tools  can  be  accessed  

    from  within  application  container – Via menu – Via  API 25
  17. 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
  18. 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
  19. 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