© Copyright 2016, Genuitec, LLC. All rights reserved.

Wojciech Galanciak

Adding Angular 2 to Your Java EE Stack - A Primer

© Copyright 2016, Genuitec, LLC. All rights reserved.

Who am I?

Key ExperienceMy Current Products

© Copyright 2016, Genuitec, LLC. All rights reserved.

Agenda

1. Introduction

2. Angular 2

3. TypeScript

4. Demo

5. Modern Web Tooling

© Copyright 2016, Genuitec, LLC. All rights reserved.

Why are we here?

+

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

© 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

© Copyright 2016, Genuitec, LLC. All rights reserved.

Angular in the Wild

© Copyright 2016, Genuitec, LLC. All rights reserved.

Architecture

© Copyright 2016, Genuitec, LLC. All rights reserved.

Architecture - Module

© Copyright 2016, Genuitec, LLC. All rights reserved.

Architecture - Component

© Copyright 2016, Genuitec, LLC. All rights reserved.

Architecture - Template

© Copyright 2016, Genuitec, LLC. All rights reserved.

Architecture - Service

© 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

© Copyright 2016, Genuitec, LLC. All rights reserved.

TypeScript - Example Code

© Copyright 2016, Genuitec, LLC. All rights reserved.

TypeScript - Second Example

© Copyright 2016, Genuitec, LLC. All rights reserved.

Developing with Angular 2

© Copyright 2016, Genuitec, LLC. All rights reserved.

Coding in Action

Backend Frontend

JSON

JerseyJAX-RS

© Copyright 2016, Genuitec, LLC. All rights reserved.

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

© Copyright 2016, Genuitec, LLC. All rights reserved.

Adding Modern Web to Eclipse

TypeScript● typescript.java● TypeScript Palantir● TypeCS● WebclipseAngular● Angular2-eclipse● Angular IDE● Webclipse

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

© Copyright 2016, Genuitec, LLC. All rights reserved.