What a Back-end Java Developer Doesn't Know About the Modern Web Stack-final

What a Back-end Java Developer

Doesn't Know About the Modern Web Stack

Peter Lindh @peterlindh

Rikard Thulin @rikard_thulin

A “typical” Java Developer

Image from http://nighthacks.com

All names, characters, and incidents portrayed in this presentation are fictitious. No identification with actual persons is intended or should be inferred.

.equals( );THIS IS A COINCIDENT

Novice

Advanced beginner

Competent

Proficient

Expert

Dreyfus model of skill acquisition

Novice

Advanced beginner

Competent

Proficient

Expert


Novice

Advanced beginner

Competent

Proficient

Expert


Expert Java Developer

Let’s do webb

Java Developer Web Developer




1st



2nd



3rd



4th

And most important...



Ecological Green TeaStarbucks Coffee

5th

Novice

Advanced beginner

Competent

Proficient

Expert


Novice

Advanced beginner

Competent

Proficient

Expert

@Inject (value=web-dev-kit)

Novice

Advanced beginner

Competent

Proficient

Expert

Java Developer doing web

Done!

Novice

Advanced beginner

Competent

Proficient

Expert

F

Novice

Advanced beginner

Competent

Proficient

Expert

F A

Novice

Advanced beginner

Competent

Proficient

Expert

F A L

Novice

Advanced beginner

Competent

Proficient

Expert

F A L S

Novice

Advanced beginner

Competent

Proficient

Expert

F A L S E

Novice

Advanced beginner

Competent

Proficient

Expert


Novice

Advanced beginner

Competent

Proficient

Expert



turns into

Kind of obvious!

Yes, but...

Novice

Advanced beginner

Competent

Proficient

Expert

because

They don't KNOW

that they don't KNOW

One step is a huge

DIFFERENCE

Novice

Advanced beginner

Competent

Proficient

Expert

This is ok

YOUKNOW

WHAT YOUDON’TKNOW

ISBLACK

ITNOT

OR WHITE

About us

Novice

Advanced beginner

Competent

Proficient

Expert

Rikard

Peter

Novice

Advanced beginner

Competent

Proficient

Expert

Rikard

Peter

Novice

Advanced beginner

Competent

Proficient

Expert

Rikard

Peter

http://squeed.com

MISSIONBuild a modern web application


FEATURING

WEB DEVELOPER


FEATURING

WEB DEVELOPERAND SPECIAL GUEST STAR

JAVA DEVELOPER

PART 1: Build a modern web application

Structure

modernweb

|-- pom.xml

`-- src/

|-- main/

| `-- resources/

| `-- images/

| `-- duke.png

`-- webapp/

|-- WEB-INF/

| `-- web.xml

|-- css/

| `-- modern.css

|-- index.html

VS

|-- images/

| `-- duke.png

|-- css/

| `-- modern.css

|-- index.html

{ why it is different }

Structure

modernweb

|-- pom.xml

`-- src/

|-- main/

| `-- resources/

| `-- images/

| `-- duke.png

`-- webapp/

|-- WEB-INF/

| `-- web.xml

|-- css/

| `-- modern.css

|-- index.html

target/modernweb

|-- css/

| `-- modern.css

|-- images/

| `-- duke.png

|-- index.html

|-- WEB-INF/

`-- web.xml

Maven to war layout

modernweb

|-- pom.xml

`-- src/

|-- main/

| `-- resources/

| `-- images/

| `-- duke.png

`-- webapp/

|-- WEB-INF/

| `-- web.xml

|-- css/

| `-- modern.css

|-- index.html

target/modernweb

|-- css/

| `-- modern.css

|-- images/

| `-- duke.png

|-- index.html

|-- WEB-INF/

`-- web.xml

Images are resources

modernweb

|-- pom.xml

`-- src/

|-- main/

| `-- resources/

| `-- images/

| `-- duke.png

`-- webapp/

|-- WEB-INF/

| `-- web.xml

|-- css/

| `-- modern.css

|-- index.html

target/modernweb

|-- css/

| `-- modern.css

|-- images/

| `-- duke.png

|-- index.html

|-- WEB-INF/

`-- web.xml

Images are resources

LOL

modernweb

|-- pom.xml

`-- src/

|-- main/

| `-- resources/

| `-- images/

| `-- duke.png

`-- webapp/

|-- WEB-INF/

| `-- web.xml

|-- css/

| `-- modern.css

|-- index.html

target/modernweb

|-- css/

| `-- modern.css

|-- images/

| `-- duke.png

|-- index.html

|-- WEB-INF/

`-- web.xml

Ok, IRL images goto

webapp

target/modernweb

|-- css/

| `-- modern.css

|-- images/

| `-- duke.png

|-- index.html

|-- WEB-INF/

`-- web.xml

war layout to war binary

WAR

target/modernweb.war

And feed the

container

WARWARWARWARWARWAR

We serve filesIt’s as simple as that!

|-- images/

| `-- duke.png

|-- css/

| `-- modern.css

|-- index.html


Add dependencies

https://jquery.com

https://jquery.com

modernweb

|-- pom.xml

`-- src/

|-- main/

| `-- resources/

| `-- images/

| `-- duke.png

`-- webapp/

|-- WEB-INF/

| `-- web.xml

|-- js/

| `-- jquery-3.1.0.min.js

|-- index.html

0101100010111001000011101011000101110010000111010110001011100100001110101100010111BUG000011101011000101110010000111010110001011100100001110101100010111001000011101011000

Rats! Forgot to download

jquery-3.1.0.jsjquery-3.1.0.min.map

3.1.1 was obviously released

What are the odds???

modernweb

|-- pom.xml

`-- src/

|-- main/

| `-- resources/

| `-- images/

| `-- duke.png

`-- webapp/

|-- WEB-INF/

| `-- web.xml

|-- js/


| jquery-3.1.1.min.js

| jquery-3.1.1.min.map

| jquery-3.1.1.js

|-- index.html

$ rm jquery-3.1.0.min.js

Something smells funny...

Why do I put dependencies

under Version Control

System?

modernweb

|-- pom.xml

`-- src/

|-- main/

| `-- resources/

| `-- images/

| `-- duke.png

`-- webapp/

|-- WEB-INF/

| `-- web.xml

|-- js/



| jquery-3.1.1.js

|-- index.html

VS

LET MEENTERTAINYOU DEMO


Add dependencies

Package managers are tools to share and consume software

libraries and their dependencies

VERYSHORT

HISTORYLESSON

2000

2004

2005

2005

Apache ANT

Ivy

Maven 1

Maven 2

2009Gradle

1977Make

2000

2004

2005

2005

Apache ANT

Ivy

Maven 1

Maven 2

2009Gradle

1977Make

2010

2012

NPM

Bower

2005Maven

or

Java Package Managers

Package Managers

and

Others package managers exists

Package manager included with node.js

For JavaScript developers to share and reuse code

Tooling dependency management

(Build system, preprocessors etc)

Dependency

App

DependencyDependency Dependency

DependencyDependency Dependency Dependency

DependencyDependency Dependency DependencyDependency

npm: nested dependencies

But npm3 has flat dependencies

While npm2 installs all dependencies in a nested way, npm3 tries to mitigate the deep trees and

redundancy that such nesting causes. npm3 attempts this by installing some secondary

dependencies (dependencies of dependencies) in a flat way...

TL;DR

npm v3 Dependency Resolution [https://docs.npmjs.com/how-npm-works/npm3]

Nested dependencies

The size of an application

is not an issue

Nested dependencies


is not an issuefor a server side Java application

Nested dependencies


is not an issuefor web apps

For web dependencies we

NEED

BowerDependency management for the web

Uses NPM

@twitter

Bower

HTML, CSS, Javascript, fonts and images

Dependency

App

Bower: flat dependencies

Flat dependencies

YOUAREONYOUROWN

Maven plugins ~= npm

Maven dependencies ~= bower

~= != =

Dependency

App

DependencyDependency Dependency

DependencyDependency Dependency Dependency

DependencyDependency Dependency DependencyDependency

maven: nested dependencies

FLATVS

NESTED

Dep

App

DepDep Dep

DepDep Dep Dep

DepDep Dep DepDep

Nested dependencies

Dependency

App

Flat dependencies

When size does matter

{ web, css, fonts }BOWER

When size does not matter

{ java, tooling, modules }MAVEN, NPM


Task runners

Plugins => build phases$ mvn clean

$ mvn test

$ mvn install

$ mvn deploy

VS


{ the details }

Task runners

Task runners automate everything that can be automated

compile css/sass, optimize images, minification, software verification

Image from https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4#.lmxjckam4

like maven vs gradle

or configuration vs codeuse whatever works best for you

Maven plugin ~= grunt / gulp plugin

Maven build phase ~= grunt task

Gradle task ~= gulp task

~= != =

VERYSHORT

HISTORYLESSONPART 2

2010

2011

NPM

Grunt

2005Maven

2012Bower

2013Gulp


Development Workflow

Just need to add the

javascript

index.html

<html> <body> <div id="#something">Duke</div> </body>

<script src="js/jquery-3.1.1.min.js"> </script></html>

modernweb

|-- pom.xml

`-- src/

|-- main/

| `-- resources/

| `-- images/

| `-- duke.png

`-- webapp/

|-- WEB-INF/

| `-- web.xml

|-- js/



| jquery-3.1.1.js

|-- index.html

Wait!New versions

will be a headache...

<script src="js/jquery-3.1.1.min.js"> </script>

<script src="js/jquery-3.1.0.min.js"> </script>

And some css

modern.css

#something { background: white;}

modernweb

|-- pom.xml

`-- src/

|-- main/

| `-- resources/

| `-- images/

| `-- duke.png

`-- webapp/

|-- WEB-INF/

| `-- web.xml

|-- css/

| `-- modern.css

|-- js/

| `-- jquery.min.js

| jquery.min.map

| jquery.js

|-- index.html

And

pom.xml

<build> <plugins> <plugin> <groupId>org.apache.tomcat.maven</groupId> <artifactId>tomcat7-maven-plugin</artifactId> <version>2.2</version> </plugin> </plugins></build>

modernweb

|-- pom.xml

`-- src/

|-- main/

| `-- resources/

| `-- images/

| `-- duke.png

`-- webapp/

|-- WEB-INF/

| `-- web.xml

|-- css/

| `-- modern.css

|-- js/

| `-- jquery.min.js

| jquery.min.map

| jquery.js

|-- index.html

$ mvn clean install

< lots of lines emitted… >

$ mvn tomcat:run

< lots of lines emitted… >

+ F5

Duke

Nice! Just need to tweak the

background color

$ mvn clean install

F5

$ mvn tomcat:run

Duke

#something { background: papayawhip;}

Nice! Just need to move #something

1px

OMG!

Nice! Just need to move #something

1px

ZZZZZ

VS



Development Workflow

QUESTION:Web workflow

equal toJavaEE workflow?

At some abstraction

YES

We write

CODE

NO

in the real world

code, build, test, preview

code build, test deploy preview

Or evenWORSE

mvn install mvn deploy CI build artifact integration test

performance test publish artifactbuild container publish container

deploy container preview


Scaffolding

$ mvn archetype:create -DgroupId=[your project's group id] -DartifactId=[your project's artifact id] -DarchetypeArtifactId=maven-archetype-j2ee-simple

VS


{ the details }

Scaffolding

YeomanScaffolding for webapps

Favors Workflow

yo.equals(archetypes)

YES

VERYSHORT

HISTORYLESSONPART 3

2012Yeoman

2005Maven

7 years advantage translated from

INTERNET TIMEis like 18,000 yearsbefore current era

SURPRISINGLY

Number of generators

MAVEN 1648YEOMAN 4148

As of 2016-08-14

Maven archetypes

OLDLEGACY

NO ECOSYSTEMFRONTEND THE BACKEND WAY

Yeoman generators

VIBRANTACTUALLY USED

GOOD ECOSYSTEMMOSTLY FOR FRONTEND

THE FUTURE MAY BE…As Yeoman beats maven archetypes

<ironic>In the future

node is required to create a java project</ironic>

TIP OF THE DAYAbout to develop a maven archetype?

Is it the right tool?Have you evaluated Yeoman?

Conclusion

Maven plugins ~= grunt / gulpMaven plugins ~= npm

Maven life cycles ~= grunt Maven dependencies ~= bower

Maven archetypes = yo

Back-end tooling

IS NOTa perfect match for

WEB DEVELOPMENT

#1The structure of a web application is lean

#2Dependencies for the web needs to be flat

#3The development workflow is very different

#4Scaffolding for the web is awesome

#5Java tools has been polished

Web tools are evolving

So the ROCKSTARS

are...

+

favorite package manager and task runner

+

ROGER THAT!...if I only could convince

the back-end team that defines the build process

API

Front-end Back-end

As you (should)

RELEASEthe frontend independently

YOU CAN USE THE RIGHT TOOLSand embrace the frontend workflow

KEY POINTDon’t wrangle your front-end code

into the backend build process

Novice

Advanced beginner

Competent

Proficient

Expert

NOT KNOWING WHAT WE DON’T KNOW

Novice

Advanced beginner

Competent

Proficient

Expert

KNOW WHAT WE DON’T KNOW

Novice

Advanced beginner

Competent

Proficient

Expert

Please allow me to introduce myself. I'm a man of wealth and tastePleased to meet you. Hope you guess my name

Your mission if you choose to accept it

EXPERIMENTWE RECOMMEND THE EASY WAY

Q & APeter Lindh Rikard Thulin@peterlindh @rikard_thulin

Documents

What a Back-end Java Developer Doesn't Know About the Modern Web Stack-final