Adding Angular 2 to Your Java EE Stack - A Primer
Transcript of Adding Angular 2 to Your Java EE Stack - A Primer
![Page 1: Adding Angular 2 to Your Java EE Stack - A Primer](https://reader033.fdocuments.in/reader033/viewer/2022051712/586a10891a28ab167d8bb37a/html5/thumbnails/1.jpg)
© Copyright 2016, Genuitec, LLC. All rights reserved.
Wojciech Galanciak
Adding Angular 2 to Your Java EE Stack - A Primer
![Page 2: Adding Angular 2 to Your Java EE Stack - A Primer](https://reader033.fdocuments.in/reader033/viewer/2022051712/586a10891a28ab167d8bb37a/html5/thumbnails/2.jpg)
© Copyright 2016, Genuitec, LLC. All rights reserved.
Who am I?
Key ExperienceMy Current Products
![Page 3: Adding Angular 2 to Your Java EE Stack - A Primer](https://reader033.fdocuments.in/reader033/viewer/2022051712/586a10891a28ab167d8bb37a/html5/thumbnails/3.jpg)
© Copyright 2016, Genuitec, LLC. All rights reserved.
Agenda
1. Introduction
2. Angular 2
3. TypeScript
4. Demo
5. Modern Web Tooling
![Page 4: Adding Angular 2 to Your Java EE Stack - A Primer](https://reader033.fdocuments.in/reader033/viewer/2022051712/586a10891a28ab167d8bb37a/html5/thumbnails/4.jpg)
© Copyright 2016, Genuitec, LLC. All rights reserved.
Why are we here?
+
![Page 5: Adding Angular 2 to Your Java EE Stack - A Primer](https://reader033.fdocuments.in/reader033/viewer/2022051712/586a10891a28ab167d8bb37a/html5/thumbnails/5.jpg)
© Copyright 2016, Genuitec, LLC. All rights reserved.
Java Enterprise Full Stack
Framework Application
Spring MVCJava EEPlay FrameworkStrutsJAX-RS
JSPVelocityFreeMarkerJavaServer Faces
Server
WebsphereTomcatWildflyJBoss
Brow
serSer
ver-
Sid
e
© Copyright 2016, Genuitec, LLC. All rights reserved.
![Page 6: Adding Angular 2 to Your Java EE Stack - A Primer](https://reader033.fdocuments.in/reader033/viewer/2022051712/586a10891a28ab167d8bb37a/html5/thumbnails/6.jpg)
© Copyright 2016, Genuitec, LLC. All rights reserved.
What can we change?
Framework Application
Spring MVCJava EEPlay FrameworkStrutsJAX-RS
Server
WebsphereTomcatWildflyJBoss
Brow
serSer
ver-
Sid
e
© Copyright 2016, Genuitec, LLC. All rights reserved.
JSON
![Page 7: Adding Angular 2 to Your Java EE Stack - A Primer](https://reader033.fdocuments.in/reader033/viewer/2022051712/586a10891a28ab167d8bb37a/html5/thumbnails/7.jpg)
© Copyright 2016, Genuitec, LLC. All rights reserved.
Angular in the Wild
![Page 8: Adding Angular 2 to Your Java EE Stack - A Primer](https://reader033.fdocuments.in/reader033/viewer/2022051712/586a10891a28ab167d8bb37a/html5/thumbnails/8.jpg)
© Copyright 2016, Genuitec, LLC. All rights reserved.
Architecture
![Page 9: Adding Angular 2 to Your Java EE Stack - A Primer](https://reader033.fdocuments.in/reader033/viewer/2022051712/586a10891a28ab167d8bb37a/html5/thumbnails/9.jpg)
© Copyright 2016, Genuitec, LLC. All rights reserved.
Architecture - Module
![Page 10: Adding Angular 2 to Your Java EE Stack - A Primer](https://reader033.fdocuments.in/reader033/viewer/2022051712/586a10891a28ab167d8bb37a/html5/thumbnails/10.jpg)
© Copyright 2016, Genuitec, LLC. All rights reserved.
Architecture - Component
![Page 11: Adding Angular 2 to Your Java EE Stack - A Primer](https://reader033.fdocuments.in/reader033/viewer/2022051712/586a10891a28ab167d8bb37a/html5/thumbnails/11.jpg)
© Copyright 2016, Genuitec, LLC. All rights reserved.
Architecture - Template
![Page 12: Adding Angular 2 to Your Java EE Stack - A Primer](https://reader033.fdocuments.in/reader033/viewer/2022051712/586a10891a28ab167d8bb37a/html5/thumbnails/12.jpg)
© Copyright 2016, Genuitec, LLC. All rights reserved.
Architecture - Service
![Page 13: Adding Angular 2 to Your Java EE Stack - A Primer](https://reader033.fdocuments.in/reader033/viewer/2022051712/586a10891a28ab167d8bb37a/html5/thumbnails/13.jpg)
© Copyright 2016, Genuitec, LLC. All rights reserved.
Built on top of TypeScript
Typed superset of JavaScriptTranscompiled to JS
© Copyright 2016, Genuitec, LLC. All rights reserved.
Background im
age source - typescriptlang.org
![Page 14: Adding Angular 2 to Your Java EE Stack - A Primer](https://reader033.fdocuments.in/reader033/viewer/2022051712/586a10891a28ab167d8bb37a/html5/thumbnails/14.jpg)
© Copyright 2016, Genuitec, LLC. All rights reserved.
TypeScript - Example Code
![Page 15: Adding Angular 2 to Your Java EE Stack - A Primer](https://reader033.fdocuments.in/reader033/viewer/2022051712/586a10891a28ab167d8bb37a/html5/thumbnails/15.jpg)
© Copyright 2016, Genuitec, LLC. All rights reserved.
TypeScript - Second Example
![Page 16: Adding Angular 2 to Your Java EE Stack - A Primer](https://reader033.fdocuments.in/reader033/viewer/2022051712/586a10891a28ab167d8bb37a/html5/thumbnails/16.jpg)
© Copyright 2016, Genuitec, LLC. All rights reserved.
Developing with Angular 2
![Page 17: Adding Angular 2 to Your Java EE Stack - A Primer](https://reader033.fdocuments.in/reader033/viewer/2022051712/586a10891a28ab167d8bb37a/html5/thumbnails/17.jpg)
© Copyright 2016, Genuitec, LLC. All rights reserved.
Coding in Action
Backend Frontend
JSON
JerseyJAX-RS
© Copyright 2016, Genuitec, LLC. All rights reserved.
![Page 18: Adding Angular 2 to Your Java EE Stack - A Primer](https://reader033.fdocuments.in/reader033/viewer/2022051712/586a10891a28ab167d8bb37a/html5/thumbnails/18.jpg)
© Copyright 2016, Genuitec, LLC. All rights reserved.
Modern Web & Eclipse Neon
● First step to modern web:○ Bower & NPM○ Grunt & gulp○ JSON Editor○ Chromium V8 debugger○ New Node.js support
© Copyright 2016, Genuitec, LLC. All rights reserved.
![Page 19: Adding Angular 2 to Your Java EE Stack - A Primer](https://reader033.fdocuments.in/reader033/viewer/2022051712/586a10891a28ab167d8bb37a/html5/thumbnails/19.jpg)
© Copyright 2016, Genuitec, LLC. All rights reserved.
Adding Modern Web to Eclipse
TypeScript● typescript.java● TypeScript Palantir● TypeCS● WebclipseAngular● Angular2-eclipse● Angular IDE● Webclipse
![Page 20: Adding Angular 2 to Your Java EE Stack - A Primer](https://reader033.fdocuments.in/reader033/viewer/2022051712/586a10891a28ab167d8bb37a/html5/thumbnails/20.jpg)
© Copyright 2016, Genuitec, LLC. All rights reserved.
What to do next?
Grab Eclipse & your preferred plug-inI’m biased, but as of next week, grab…
Then start hacking at your first app.
Chat me up about NG2.
![Page 21: Adding Angular 2 to Your Java EE Stack - A Primer](https://reader033.fdocuments.in/reader033/viewer/2022051712/586a10891a28ab167d8bb37a/html5/thumbnails/21.jpg)
© Copyright 2016, Genuitec, LLC. All rights reserved.