What a Back-end Java Developer Doesn't Know About the Modern Web Stack-final
-
Upload
rikard-thulin -
Category
Documents
-
view
671 -
download
0
Transcript of 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
Dreyfus model of skill acquisition
Novice
Advanced beginner
Competent
Proficient
Expert
Dreyfus model of skill acquisition
Expert Java Developer
Let’s do webb
Java Developer Web Developer
Image from http://nighthacks.com
Java Developer Web Developer
Image from http://nighthacks.com
1st
Java Developer Web Developer
Image from http://nighthacks.com
2nd
Java Developer Web Developer
Image from http://nighthacks.com
3rd
Java Developer Web Developer
Image from http://nighthacks.com
4th
And most important...
Java Developer Web Developer
Image from http://nighthacks.com
Ecological Green TeaStarbucks Coffee
5th
Novice
Advanced beginner
Competent
Proficient
Expert
Expert Java Developer
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
Java Developer doing web
Novice
Advanced beginner
Competent
Proficient
Expert
Java Developer doing web
Expert Java Developer
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
MISSIONBuild a modern web application
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
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
PART 2: Build a modern web application
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.0.min.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.min.js
| jquery-3.1.1.min.map
| jquery-3.1.1.js
|-- index.html
VS
LET MEENTERTAINYOU DEMO
{ why it is different }
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
The size of an application
is not an issuefor a server side Java application
Nested dependencies
The size of an application
is not an issuefor web apps
For web dependencies we
NEED
BowerDependency management for the web
Uses NPM
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
PART 3: Build a modern web application
Task runners
Plugins => build phases$ mvn clean
$ mvn test
$ mvn install
$ mvn deploy
VS
LET MEENTERTAINYOU DEMO
{ 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
PART 4: Build a modern web application
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.min.js
| jquery-3.1.1.min.map
| 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
LET MEENTERTAINYOU DEMO
{ why it is different }
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
PART 6: Build a modern web application
Scaffolding
$ mvn archetype:create -DgroupId=[your project's group id] -DartifactId=[your project's artifact id] -DarchetypeArtifactId=maven-archetype-j2ee-simple
VS
LET MEENTERTAINYOU DEMO
{ 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