AA-AS/EIS2-EU | | © Robert Bosch GmbH 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 original presentation by Bernhard Moser

AA-AS/EIS2-EU | | © Robert Bosch GmbH 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

AA-AS/EIS2-EU | | © Robert Bosch GmbH 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 ?

AA-AS/EIS2-EU | | © Robert Bosch GmbH 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

AA-AS/EIS2-EU | | © Robert Bosch GmbH 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

AA-AS/EIS2-EU | | © Robert Bosch GmbH 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

AA-AS/EIS2-EU | | © Robert Bosch GmbH 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

AA-AS/EIS2-EU | | © Robert Bosch GmbH 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 8

AA-AS/EIS2-EU | | © Robert Bosch GmbH 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

AA-AS/EIS2-EU | | © Robert Bosch GmbH 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

AA-AS/EIS2-EU | | © Robert Bosch GmbH 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

a real SPA or Not AA-AS/EIS2-EU | | © Robert Bosch GmbH 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 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

JS or Not JS AA-AS/EIS2-EU | | © Robert Bosch GmbH 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

Define Project Structue AA-AS/EIS2-EU | | © Robert Bosch GmbH 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 Seen at 2 Seen at 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

Automated Testing AA-AS/EIS2-EU | | © Robert Bosch GmbH 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 Good overview at 2 Seen at 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

AA-AS/EIS2-EU | | © Robert Bosch GmbH 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

AA-AS/EIS2-EU | | © Robert Bosch GmbH 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

AA-AS/EIS2-EU | | © Robert Bosch GmbH 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..

AA-AS/EIS2-EU | | © Robert Bosch GmbH 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

AA-AS/EIS2-EU | | © Robert Bosch GmbH 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 Some of the bigger consulting companies started offering AngularJS consulting 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

AA-AS/EIS2-EU | | © Robert Bosch GmbH 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! :-)

AA-AS/EIS2-EU | | © Robert Bosch GmbH 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

AA-AS/EIS2-EU | | © Robert Bosch GmbH 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

AA-AS/EIS2-EU | | © Robert Bosch GmbH 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!

AA-AS/EIS2-EU | | © Robert Bosch GmbH 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

AA-AS/EIS2-EU | | © Robert Bosch GmbH 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

AA-AS/EIS2-EU | | © Robert Bosch GmbH 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  backbone-can-ember/  Article “Ember: JavaScript-Framework für Webanwendungen – Glühfaktor” in IX 08/2013   backbone-can-ember/ backbone-can-ember/  js js

AA-AS/EIS2-EU | | © Robert Bosch GmbH 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: angularjs-if-i-have-a-jquery-background

29 AA-AS/EIS2-EU | | © Robert Bosch GmbH 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 AA-AS/EIS2-EU | | © Robert Bosch GmbH 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 AngularJS as overall best rated framework. Strength in features and maturity.

31 AA-AS/EIS2-EU | | © Robert Bosch GmbH 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: 1 Standard Application for JS MVC (“Hello World”), can be found at Added at

32 AA-AS/EIS2-EU | | © Robert Bosch GmbH 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: / / 1 Rated in Internet by Developers - Architects

33 AA-AS/EIS2-EU | | © Robert Bosch GmbH 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