Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (11)
Similar to What a Back-end Java Developer Doesn't Know About the Modern Web Stack-final
Similar to What a Back-end Java Developer Doesn't Know About the Modern Web Stack-final (20)
More from Rikard Thulin
What a Back-end Java Developer Doesn't Know About the Modern Web Stack-final
- 1. What a Back-end Java Developer Doesn't Know About the Modern Web Stack Peter Lindh @peterlindh Rikard Thulin @rikard_thulin
- 2. A “typical” Java Developer Image from http://nighthacks.com
- 3. All names, characters, and incidents portrayed in this presentation are fictitious. No identification with actual persons is intended or should be inferred.
- 4. .equals( ); THIS IS A COINCIDENT
- 5. Novice Advanced beginner Competent Proficient Expert Dreyfus model of skill acquisition
- 6. Novice Advanced beginner Competent Proficient Expert Dreyfus model of skill acquisition
- 7. Novice Advanced beginner Competent Proficient Expert Dreyfus model of skill acquisition Expert Java Developer
- 9. Java Developer Web Developer Image from http://nighthacks.com
- 10. Java Developer Web Developer Image from http://nighthacks.com 1st
- 11. Java Developer Web Developer Image from http://nighthacks.com 2nd
- 12. Java Developer Web Developer Image from http://nighthacks.com 3rd
- 13. Java Developer Web Developer Image from http://nighthacks.com 4th
- 15. Java Developer Web Developer Image from http://nighthacks.com Ecological Green TeaStarbucks Coffee 5th
- 19. Done!
- 26. Novice Advanced beginner Competent Proficient Expert Java Developer doing web Expert Java Developer turns into
- 27. Kind of obvious!
- 28. Yes, but...
- 30. because
- 31. They don't KNOW that they don't KNOW
- 32. One step is a huge DIFFERENCE
- 36. About us
- 41. MISSIONBuild a modern web application
- 42. MISSIONBuild a modern web application FEATURING WEB DEVELOPER
- 43. MISSIONBuild a modern web application FEATURING WEB DEVELOPER AND SPECIAL GUEST STAR JAVA DEVELOPER
- 44. PART 1: Build a modern web application Structure
- 45. modernweb |-- pom.xml `-- src/ |-- main/ | `-- resources/ | `-- images/ | `-- duke.png `-- webapp/ |-- WEB-INF/ | `-- web.xml |-- css/ | `-- modern.css |-- index.html
- 46. VS
- 47. |-- images/ | `-- duke.png |-- css/ | `-- modern.css |-- index.html
- 48. { why it is different } Structure
- 49. 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
- 50. 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
- 51. 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
- 52. 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
- 53. target/modernweb |-- css/ | `-- modern.css |-- images/ | `-- duke.png |-- index.html |-- WEB-INF/ `-- web.xml war layout to war binary WAR target/modernweb.war
- 55. We serve files It’s as simple as that! |-- images/ | `-- duke.png |-- css/ | `-- modern.css |-- index.html
- 56. PART 2: Build a modern web application Add dependencies
- 59. modernweb |-- pom.xml `-- src/ |-- main/ | `-- resources/ | `-- images/ | `-- duke.png `-- webapp/ |-- WEB-INF/ | `-- web.xml |-- js/ | `-- jquery-3.1.0.min.js |-- index.html
- 62. 3.1.1 was obviously released What are the odds???
- 63. 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
- 65. 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
- 66. VS
- 68. { why it is different } Add dependencies
- 69. Package managers are tools to share and consume software libraries and their dependencies
- 71. 2000 2004 2005 2005 Apache ANT Ivy Maven 1 Maven 2 2009 Gradle 1977 Make
- 72. 2000 2004 2005 2005 Apache ANT Ivy Maven 1 Maven 2 2009 Gradle 1977 Make
- 75. Package Managers and Others package managers exists
- 76. Package manager included with node.js For JavaScript developers to share and reuse code
- 77. Tooling dependency management (Build system, preprocessors etc)
- 78. Dependency App DependencyDependency Dependency DependencyDependency Dependency Dependency DependencyDependency Dependency DependencyDependency npm: nested dependencies
- 79. 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]
- 80. Nested dependencies The size of an application is not an issue
- 81. Nested dependencies The size of an application is not an issue for a server side Java application
- 82. Nested dependencies The size of an application is not an issue for web apps
- 83. For web dependencies we NEED
- 84. Bower Dependency management for the web Uses NPM @twitter
- 85. Bower HTML, CSS, Javascript, fonts and images
- 88. Maven plugins ~= npm Maven dependencies ~= bower ~= != =
- 89. Dependency App DependencyDependency Dependency DependencyDependency Dependency Dependency DependencyDependency Dependency DependencyDependency maven: nested dependencies
- 90. FLAT VS NESTED
- 91. 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
- 92. PART 3: Build a modern web application Task runners
- 93. Plugins => build phases $ mvn clean $ mvn test $ mvn install $ mvn deploy
- 94. VS
- 96. { the details } Task runners
- 97. Task runners automate everything that can be automated compile css/sass, optimize images, minification, software verification
- 99. like maven vs gradle or configuration vs code use whatever works best for you
- 100. Maven plugin ~= grunt / gulp plugin Maven build phase ~= grunt task Gradle task ~= gulp task ~= != =
- 103. PART 4: Build a modern web application Development Workflow
- 104. Just need to add the javascript
- 105. 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
- 106. Wait! New versions will be a headache...
- 107. <script src="js/jquery-3.1.1.min.js"> </script> <script src="js/jquery-3.1.0.min.js"> </script>
- 108. And some css
- 109. 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
- 110. And
- 111. 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
- 112. $ mvn clean install < lots of lines emitted… >
- 113. $ mvn tomcat:run < lots of lines emitted… >
- 115. + F5
- 116. Duke
- 117. Nice! Just need to tweak the background color
- 118. $ mvn clean install F5 $ mvn tomcat:run Duke #something { background: papayawhip; }
- 119. Nice! Just need to move #something 1px
- 120. OMG! Nice! Just need to move #something 1px
- 121. ZZZZZ
- 122. VS
- 124. { why it is different } Development Workflow
- 125. QUESTION: Web workflow equal to JavaEE workflow?
- 127. We write CODE
- 128. NO in the real world
- 129. code, build, test, preview
- 130. code build, test deploy preview
- 131. Or even WORSE
- 132. mvn install mvn deploy CI build artifact integration test performance test publish artifact build container publish container deploy container preview
- 133. PART 6: Build a modern web application Scaffolding
- 134. $ mvn archetype:create -DgroupId=[your project's group id] -DartifactId=[your project's artifact id] -DarchetypeArtifactId=maven-archetype-j2ee-simple
- 135. VS
- 137. { the details } Scaffolding
- 138. Yeoman Scaffolding for webapps Favors Workflow
- 140. YES
- 143. 7 years advantage translated from INTERNET TIME is like 18,000 years before current era
- 144. SURPRISINGLY Number of generators MAVEN 1648 YEOMAN 4148
- 145. Maven archetypes OLD LEGACY NO ECOSYSTEM FRONTEND THE BACKEND WAY
- 146. Yeoman generators VIBRANT ACTUALLY USED GOOD ECOSYSTEM MOSTLY FOR FRONTEND
- 147. THE FUTURE MAY BE… As Yeoman beats maven archetypes <ironic> In the future node is required to create a java project </ironic>
- 148. TIP OF THE DAY About to develop a maven archetype? Is it the right tool? Have you evaluated Yeoman?
- 149. Conclusion
- 150. Maven plugins ~= grunt / gulp Maven plugins ~= npm Maven life cycles ~= grunt Maven dependencies ~= bower Maven archetypes = yo
- 151. Back-end tooling IS NOT a perfect match for WEB DEVELOPMENT
- 152. #1 The structure of a web application is lean
- 153. #2 Dependencies for the web needs to be flat
- 154. #3 The development workflow is very different
- 155. #4 Scaffolding for the web is awesome
- 156. #5 Java tools has been polished Web tools are evolving
- 158. + favorite package manager and task runner +
- 159. ROGER THAT! ...if I only could convince the back-end team that defines the build process
- 161. As you (should) RELEASE the frontend independently YOU CAN USE THE RIGHT TOOLS and embrace the frontend workflow
- 162. KEY POINT Don’t wrangle your front-end code into the backend build process
- 163. Novice Advanced beginner Competent Proficient Expert NOT KNOWING WHAT WE DON’T KNOW
- 165. Novice Advanced beginner Competent Proficient Expert Please allow me to introduce myself. I'm a man of wealth and taste Pleased to meet you. Hope you guess my name
- 166. Your mission if you choose to accept it EXPERIMENT WE RECOMMEND THE EASY WAY
- 167. Q & A Peter Lindh Rikard Thulin @peterlindh @rikard_thulin