AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe.

Präsentation zum Thema: "AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe."—  Präsentation transkript:

1 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. An AngularJS Application Automotive Service Solutions 1 AngularJS in an Enterprise Project presented by Simon Hartmann simon.hartmann2@de.bosch.com original presentation by Bernhard Moser bernhard.moser2@de.bosch.com

2 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. An AngularJS Application Automotive Service Solutions What you can expect No more new cool stuff but a way how you can get cool! Code New Framework Now FW Intro 2

3 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. An AngularJS Application Automotive Service Solutions 3 Who is this? What can he tell me ?

4 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. An AngularJS Application Automotive Service Solutions 4 Our Business: Diagnosis Software for the Independent Aftermarket 1 Seen from UI Technology Software for Electronic Control Unit Diagnostics Local Installation See herehere Software for Electronic Control Unit Diagnostics Local Installation See herehere Data Centered Best in UI Multi Browser Data Centered Best in UI Multi Browser Offline (future) Scalability Offline (future) Scalability

5 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. An AngularJS Application Automotive Service Solutions Why AngularJS? The architecture decision 5

6 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. An AngularJS Application Automotive Service Solutions 6 The Architecture Decision towards AngularJS YES! Server Side Rendering Client Side Rendering Step 1 AngularJS Others Step 2

7 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. An AngularJS Application Automotive Service Solutions 7 Actions in Step 1 towards SPA  Created POC to compare Some experience gained with the technology Some open questions clarified „Create feeling“  Created comparison matrix

8 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. An AngularJS Application Automotive Service Solutions Actions in Step 2 towards AngularJS  POC to compare (again)  Watched the trend 06/2013: promising trend Various articles in media  Research on sustainability of AngularJS Google in background 06/2013: Rumors about lots of started projects  Comparison matrix online  Inquired on personal preferences / feeling JAVA/JSF Background Developers Felt productive with AngularJS http://sporto.github.io/blog/2013/04/12/comparison-angular-backbone-can-ember/ 8

9 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. An AngularJS Application Automotive Service Solutions 9 So lets start – are there any risks?  Finally created risk analysis after decision  2 open risks identified Developer capacity (internal + external!) Using non-standard framework We will come to that later Have to take the risk

10 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. An AngularJS Application Automotive Service Solutions How we used it.. Our technological approach with AnguarJS 10

11 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. An AngularJS Application Automotive Service Solutions What we used – all that's available ;-) 11 Controller DI Directive 2 Way Bnd. Templares Filter $cookieStore $http XSRF Mechan. Closure Compiler $broadcast HTTPIntercept Multi Modules Routing

12 a real SPA or Not AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. An AngularJS Application Automotive Service Solutions Necessary Architecture Decisions 1 12 4 + Straight Forward SPA Concept - Higher Initial load times - Might get to big for really huge apps / sites + Maybe more the standard way in the web + Reduced load-times + Automatic Structuring of the app - Shared state more complex - More complex solution We went for this All in one Multiple SPAs

13 JS or Not JS AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. An AngularJS Application Automotive Service Solutions Necessary Architecture Decisions 24 We went for this 13 Just implement in Javascript + Directly implementing in general + Lots of examples available - JS maybe not designed for huge apps Typescript, Coffescript, etc and transformation + Maybe type-safe (Typescript) + Maybe more of a language style you like - Transformation step necessary - Debugging in JS JS Not JS

14 Define Project Structue AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. An AngularJS Application Automotive Service Solutions Necessary Architecture Decisions 34 14 1 Seen at https://github.com/angular/angular-seedhttps://github.com/angular/angular-seed 2 Seen at http://www.artandlogic.com/blog/2013/05/ive-been-doing-it-wrong-part-1-of-3/ 1st Level: Function 2nd Level: Architect. Layer 3rd Level: Indiviual component All in one 1 One file per component 2 Deeper structure We went for this

15 Automated Testing AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. An AngularJS Application Automotive Service Solutions Necessary Architecture Decisions 44 15 1 Good overview at http://andyshora.com/unit-testing-best-practices-angularjs.html 2 Seen at http://www.artandlogic.com/blog/2013/05/ive-been-doing-it-wrong-part-1-of-3/ Unit: Jasmine, Mocha, QUnit Integration 1 On JS Stack Integration 1 On JS Stack Integration 2 Selenium / Protactor Integration 2 Selenium / Protactor -Typical unit testing of small units (filters, services) -Tests written in JS -Available Frameworks: Jasmin, Mocha, QUnit +Small units can be tested -Testing of controllers, services requires intensive mocking -Full integration testing (does include backend) -Well-known to the Java community We went for this -End-to-end test on JS- Stack -“Navigate over App” -Tests written in JS -Available frameworks: Karma, Casper

16 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. An AngularJS Application Automotive Service Solutions Nothing else? Really? 16

17 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. An AngularJS Application Automotive Service Solutions 17 And on top? Missing Concepts (at least for us)  I18N Translation in HTML (labels, etc) 5-layer „fallback“ translations  Enhanced Routing Routing: Mapping URL to Controller Standard routing missing hierarchy  UI Base Framework Navigation, breadcrumb Auth lifecycle (show login screen, etc)  Completely jQuery-UI free Components Breadcrumb: Do URLs right + Breadcrumb is easy to implement UI Base Framework: Don’t underestimate! Breadcrumb: Do URLs right + Breadcrumb is easy to implement UI Base Framework: Don’t underestimate! used angular-translate used ui-router

18 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. An AngularJS Application Automotive Service Solutions 18 Common Pitfals  Reload Issue State in JS is lost! -> Requires application to be reinitialized Keep full state in URL (or browser local storage or server)  Take care of bookmark-ability + browser forward / backward Users are used standard browser functionalities! Do not take SPA concept too far! UI-Router provides helpful features..

19 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. An AngularJS Application Automotive Service Solutions And the organization? Business as usual? 19

20 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. An AngularJS Application Automotive Service Solutions Organziational Challanges – The Developers  Training of internal developers Challenge 1: Developers with Java experience Challenge 2: JS developers jQuery follows a different principle! 1  Additional developers Difficult market for AngularJS consultants, improved over time, though JS developers are mostly freelancers (to be considered when acquiring external support) Some of the bigger consulting companies started offering AngularJS consulting www.angularjs.de Some of the bigger consulting companies started offering AngularJS consulting www.angularjs.de 2 steps necessary! Even JS is its own language which has to be learned! 2 steps necessary! Even JS is its own language which has to be learned! 20 First start pretty easy Some good online resources, some good books First start pretty easy Some good online resources, some good books 1 http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background

21 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. An AngularJS Application Automotive Service Solutions 21 Organziational Challanges  Build environment Standard Java build environment available Issue to integrate  Development environment Standard Java IDE (Eclipse, etc) broadly used Tools available to integrate Turned away from Eclipse due to lacking JS support using Webstorm Turned away from Eclipse due to lacking JS support using Webstorm …and, you need a dark themed Development environment to be cool! :-)

22 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. An AngularJS Application Automotive Service Solutions Would you do it again? YES 22

23 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. An AngularJS Application Automotive Service Solutions And why are you here? -M-My passion on the technology - Bosch is hiring! ;-) 23

24 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. An AngularJS Application Automotive Service Solutions 24 Thanks for listening!

25 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. [ESI-Web] Backup Slides Automotive Aftermarket 25

26 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. An AngularJS Application Automotive Service Solutions 26 Angular & JS Training https://docs.angularjs.org/tutorial http://angularjs.de/

27 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. An AngularJS Application Automotive Service Solutions 27 List of Online Resources supporting Decission  http://sporto.github.io/blog/2013/04/12/comparison-angular- backbone-can-ember/  Article “Ember: JavaScript-Framework für Webanwendungen – Glühfaktor” in IX 08/2013  http://de.slideshare.net/moschel/canjs-the-best-of-both-worlds http://de.slideshare.net/moschel/canjs-the-best-of-both-worlds  http://sporto.github.io/blog/2013/04/12/comparison-angular- backbone-can-ember/ http://sporto.github.io/blog/2013/04/12/comparison-angular- backbone-can-ember/  http://hjortureh.tumblr.com/post/22117245794/spine-js-vs-backbone- js http://hjortureh.tumblr.com/post/22117245794/spine-js-vs-backbone- js

28 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. An AngularJS Application Automotive Service Solutions 28 Organizational Issues  Get people trained: http://stackoverflow.com/questions/14994391/how-do-i-think-in- angularjs-if-i-have-a-jquery-background

29 29 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. ESI-Web UI Technology Automotive Aftermarket The 2 different Architecture Styles - Overview Characteristics Full application running in client (HTML, CSS, Javascript) Only data is requested from the server (mainly REST) „Client-Server“ approach The „New“ HTML5 Style No standard frameworks available Characteristics HTML is generated on Server Events are sent to Sever New HTML is sent to Client Build in AJAX Calls prevent full page reload and allows fast responses The „Standard“ Style JSF as JEE Standard popular example Server CentricClient Centric

30 30 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. Rating of the different frameworks Results of online comparison tool with personal relevance criteria [ESI-Web] JS Framework Evaluation Automotive Aftermarket Strength and Weaknesses have been defined on website, relevance defined by Bernhard Moser Source http://sporto.github.io/blog/2013/04/12/comparison-angular-backbone-can-ember/ AngularJS as overall best rated framework. Strength in features and maturity.

31 31 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. [ESI-Web] JS Framework Evaluation Code Comparison of TODO MVC 1 Automotive Aftermarket Source: http://blog.coderstats.net/todomvc-complexity/http://blog.coderstats.net/todomvc-complexity/ 1 Standard Application for JS MVC (“Hello World”), can be found at http://todomvc.com/ Added at 19.09.2014

32 32 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. [ESI-Web] JS Framework Evaluation Top JavaScript MVC Frameworks 1 Automotive Aftermarket Source: http://www.infoq.com/research/top-javascript-mvc-frameworks?utm_source=infoq&utm_medium=popular_links_homepage / http://www.infoq.com/research/top-javascript-mvc-frameworks?utm_source=infoq&utm_medium=popular_links_homepage / 1 Rated in Internet by Developers - Architects

33 33 AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder Verfügung, Verwertung, Reproduktion, Bearbeitung, Weitergabe sowie für den Fall von Schutzrechtsanmeldungen. Titel des Kapitels Automotive Aftermarket Technology Radar - Thoughtworks http://www.thoughtworks.com/about-us