AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder...

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 Projectpresented by

Simon [email protected]

original presentation by

Bernhard [email protected]




What you can expect

No more new cool

stuff

but a way how you

can get cool!

CodeNew

Framework

Now FW Intro

2




3

Who is this?

What can he tell me?




4

Our Business: Diagnosis Software for the Independent Aftermarket

1 Seen from UI Technology

CURRENT

Software for Electronic Control Unit Diagnostics

Local Installation

See here

FUTURE

Data Centered

Best in UI

Multi Browser

MOST INFLUENCING REQUIREMENTS1

Offline (future)

Scalability

http://de-ww.bosch-automotive.com/en/ww/products_workshopworld/testing_equipment_products/ecu_diagnostics/ecu_diagnosis




Why AngularJS?

The architecture decision

5




6

The Architecture Decision towards AngularJS

YES!

Server Side Rendering

Client Side Rendering

Step 1

AngularJS Others

Step 2




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




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

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




How we used it..

Our technological approach

with AnguarJS

10




What we used – all that's available ;-)

11

Controller

DIDirective

2 Way Bnd.

Templares

Filter

$cookieStore

$http

XSRF Mechan.

Closure Compiler$broadcast

HTTPIntercept Multi Modules

Routing

a real SPA or Not




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

JS or Not JS




Necessary Architecture Decisions 2 4

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





14

1 Seen at https://github.com/angular/angular-seed2 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 one1 One file per component 2 Deeper structure

We went for this

https://github.com/angular/angular-seed

Automated Testing





15

1 Good overview at http://andyshora.com/unit-testing-best-practices-angularjs.html2 Seen at http://www.artandlogic.com/blog/2013/05/ive-been-doing-it-wrong-part-1-of-3/

Unit: Jasmine, Mocha,

QUnit

Integration 1On JS Stack

Integration 2Selenium / 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




Nothing else?

Really?

16




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

implementUI Base Framework: Don’t

underestimate!

used angular-translate

used ui-router




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..




And the organization?

Business as usual?

19




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

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

1 http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background




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

…and, you need a dark themed Development environment to be cool! :-)




Would you do it again?

YES

22




And why are you here?

- My passion on the technology

- Bosch is hiring! ;-)

23




24

Thanks for listening!


[ESI-Web]

Backup Slides

Automotive Aftermarket

25




26

Angular & JS Training

https://docs.angularjs.org/tutorial

http://angularjs.de/




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://hjortureh.tumblr.com/post/22117245794/spine-js-vs-backbone-js

http://de.slideshare.net/moschel/canjs-the-best-of-both-worlds








28

Organizational Issues Get people trained:

http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background

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


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 Centric Client Centric


Rating of the different frameworksResults of online comparison tool with personal relevance criteria

[ESI-Web] JS Framework Evaluation


Strength and Weaknesses have been defined on website, relevance defined by Bernhard MoserSource http://sporto.github.io/blog/2013/04/12/comparison-angular-backbone-can-ember/

AngularJS as overall best rated framework. Strength in features and maturity.



Code Comparison of TODO MVC1


Source: 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

http://blog.coderstats.net/todomvc-complexity/



Top JavaScript MVC Frameworks1


Source: http://www.infoq.com/research/top-javascript-mvc-frameworks?utm_source=infoq&utm_medium=popular_links_homepage

/

1 Rated in Internet by Developers - Architects

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

http://blog.coderstats.net/todomvc-complexity/


Titel des Kapitels


Technology Radar - Thoughtworks

http://www.thoughtworks.com/about-us

AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder...

Documents

Transcript of AA-AS/EIS2-EU | 30.06.2014 | © Robert Bosch GmbH 2014. Alle Rechte vorbehalten, auch bzgl. jeder...