Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,390 views

Published on

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

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

×