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

And most important...

Ecological Green TeaStarbucks Coffee

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

Novice

Advanced beginner

Competent

Proficient

Expert

Novice

Advanced beginner

Competent

Proficient

Expert

Novice

Advanced beginner

Competent

Proficient

Expert

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

OR WHITE

About us

Novice

Advanced beginner

Competent

Proficient

Expert

Rikard

Novice

Advanced beginner

Competent

Proficient

Expert

Rikard

Novice

Advanced beginner

Competent

Proficient

Expert

Rikard

MISSIONBuild a modern web application

FEATURING

WEB DEVELOPER

MISSIONBuild a modern web application

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

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

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

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

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

LET MEENTERTAINYOU DEMO

Add dependencies

Package managers are tools to share and consume software

libraries and their dependencies

VERYSHORT

HISTORYLESSON

Apache ANT

Maven 1

Maven 2

2009Gradle

1977Make

Apache ANT

Maven 1

Maven 2

2009Gradle

1977Make

2005Maven

Java Package Managers

Package Managers

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

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

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

BowerDependency management for the web

Uses NPM

@twitter

HTML, CSS, Javascript, fonts and images

Dependency

Bower: flat dependencies

Flat dependencies

YOUAREONYOUROWN

Maven plugins ~= npm

Maven dependencies ~= bower

~= != =

Dependency

DependencyDependency Dependency

DependencyDependency Dependency Dependency

DependencyDependency Dependency DependencyDependency

maven: nested dependencies

FLATVS

NESTED

DepDep Dep

DepDep Dep Dep

DepDep Dep DepDep

Nested dependencies

Dependency

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

{ 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

2005Maven

2012Bower

2013Gulp

Development Workflow

Just need to add the

javascript

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

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

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

Nice! Just need to tweak the

background color

$ mvn clean install

$ mvn tomcat:run

#something { background: papayawhip;}

Nice! Just need to move #something

Development Workflow

QUESTION:Web workflow

equal toJavaEE workflow?

At some abstraction

We write

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

{ the details }

Scaffolding

YeomanScaffolding for webapps

Favors Workflow

yo.equals(archetypes)

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

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

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

Documents

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

Red Hat JBoss Developer Studio Integration Stack … › documentation › en-us › red_hat...To install JBoss Developer Studio Integration Stack in Eclipse when offline: 1. Locate

ITI Classes to Careers Roadmap, Information Technology, … · 2018-05-14 · Front End Developer. UI Designer Web Developer. Full Stack Developer. Programming Fundamentals HTML5.

Stellenanzeige Full-Stack Developer 08.2019 EN · 2020-02-21 · CTO. As a Full Stack developer, you are also responsible for the implementation of ideas and requirements in software.

CERTIFIED MERN Stack Developer

Oracle Java & Developer Cloud Service: What It Does & Doesn't Do

COMPANIES FOR INTERNSHIP 2020 - ict.mahidol.ac.th · 4/22/2020 · Backend Developer / Frontend Developer / Full Stack Developer / Mobile Developer (Android, iOS) / QA Engineer

สิ งที่คุณจะได รับจากหลักสูตรนี้ Full Stack Mobile ... · Full Stack Mobile Application Developer Bootcamp ... • User

Full-cycle Software Developer, Full-stack Web Developer ...ystp.ac.ir/media/2019/07/MiMFa-Resume.pdf · Mohammad Fathi Updated until May 2019 Full-cycle Software Developer, Full-stack

Full Stack Developer - Bootcamps de GeeksHubs Academy

Syllabus Full Stack Developer Presencial

JESUS MIGUEL DEVELOPER - FULL STACK PAYANO QUISPE

Dr. Rohit Varma a full stack developer

The Developer Side of the Microsoft Business Intelligence Stack

Full Stack Developer - ArkageFull Stack Developer Per la sede di Roma siamo alla ricerca di un Full Stack Developer con almeno 4 anni di esperienza. Responsabilità La persona individuata

10 Advantages of Hiring Full Stack Developer

Red Hat JBoss Developer Studio Integration Stack 10.1 ......Mars (4.5) but JBoss Developer Studio Integration Stack 10.x is based on Eclipse Neon (4.6). No updates are available for

FULL STACK WEB DEVELOPER - WSA · FULL STACK WEB DEVELOPER COURSE SYLLABUS Cascading Style Sheets (CSS3) Module Objectives: Building Strong expertise to develop front end application

Full Stack Developer

FULL STACK JAVA DEVELOPER - Rooman

Program Guide Full-Stack Web Developer