Download to read offline
![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]](https://image.slidesharecdn.com/65a0fe75-8527-4a4c-858f-015fe6ce172e-160920174929/85/What-a-Back-end-Java-Developer-Doesn-t-Know-About-the-Modern-Web-Stack-final-79-320.jpg)
![$ mvn archetype:create
-DgroupId=[your project's group id]
-DartifactId=[your project's artifact id]
-DarchetypeArtifactId=maven-archetype-j2ee-simple](https://image.slidesharecdn.com/65a0fe75-8527-4a4c-858f-015fe6ce172e-160920174929/85/What-a-Back-end-Java-Developer-Doesn-t-Know-About-the-Modern-Web-Stack-final-134-320.jpg)
More Related Content
Similar to 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-final
- 1. What a Back-end JavaDeveloper Doesn't Know About the Modern Web Stack Peter Lindh @peterlindh Rikard Thulin @rikard_thulin
- 2. A “typical” JavaDeveloper 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 ISA COINCIDENT
- 5.
- 6.
- 7. Novice Advanced beginner Competent Proficient Expert Dreyfus model ofskill acquisition Expert Java Developer
- 8.
- 9. Java Developer WebDeveloper Image from http://nighthacks.com
- 10. Java Developer WebDeveloper Image from http://nighthacks.com 1st
- 11. Java Developer WebDeveloper Image from http://nighthacks.com 2nd
- 12. Java Developer WebDeveloper Image from http://nighthacks.com 3rd
- 13. Java Developer WebDeveloper Image from http://nighthacks.com 4th
- 14.
- 15. Java Developer WebDeveloper Image from http://nighthacks.com Ecological Green TeaStarbucks Coffee 5th
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26. Novice Advanced beginner Competent Proficient Expert Java Developer doingweb Expert Java Developer turns into
- 27.
- 28.
- 29.
- 30.
- 31. They don't KNOW that theydon't KNOW
- 32. One step is ahuge DIFFERENCE
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 41. MISSIONBuild a modernweb application
- 42. MISSIONBuild a modernweb application FEATURING WEB DEVELOPER
- 43. MISSIONBuild a modernweb application FEATURING WEB DEVELOPER AND SPECIAL GUEST STAR JAVA DEVELOPER
- 44. PART 1: Builda 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.
- 47. |-- images/ | `--duke.png |-- css/ | `-- modern.css |-- index.html
- 48. { why itis 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
- 54.
- 55. We serve files It’sas simple as that! |-- images/ | `-- duke.png |-- css/ | `-- modern.css |-- index.html
- 56. PART 2: Builda modern web application Add dependencies
- 57.
- 58.
- 59. modernweb |-- pom.xml `-- src/ |--main/ | `-- resources/ | `-- images/ | `-- duke.png `-- webapp/ |-- WEB-INF/ | `-- web.xml |-- js/ | `-- jquery-3.1.0.min.js |-- index.html
- 60.
- 61.
- 62. 3.1.1 was obviouslyreleased 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
- 64.
- 65. Why do Iput 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.
- 67.
- 68. { why itis different } Add dependencies
- 69. Package managers aretools to share and consume software libraries and their dependencies
- 70.
- 71. 2000 2004 2005 2005 Apache ANT Ivy Maven 1 Maven2 2009 Gradle 1977 Make
- 72. 2000 2004 2005 2005 Apache ANT Ivy Maven 1 Maven2 2009 Gradle 1977 Make
- 73.
- 74.
- 75. Package Managers and Others packagemanagers exists
- 76. Package manager includedwith node.js For JavaScript developers to share and reuse code
- 77. Tooling dependency management (Buildsystem, preprocessors etc)
- 78. Dependency App DependencyDependency Dependency DependencyDependency DependencyDependency DependencyDependency Dependency DependencyDependency npm: nested dependencies
- 79. But npm3 hasflat 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 sizeof an application is not an issue
- 81. Nested dependencies The sizeof an application is not an issue for a server side Java application
- 82. Nested dependencies The sizeof an application is not an issue for web apps
- 83. For web dependencieswe NEED
- 84. Bower Dependency management forthe web Uses NPM @twitter
- 85. Bower HTML, CSS, Javascript,fonts and images
- 86.
- 87.
- 88. Maven plugins ~=npm Maven dependencies ~= bower ~= != =
- 89. Dependency App DependencyDependency Dependency DependencyDependency DependencyDependency DependencyDependency Dependency DependencyDependency maven: nested dependencies
- 90.
- 91. Dep App DepDep Dep DepDep DepDep 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: Builda modern web application Task runners
- 93. Plugins => buildphases $ mvn clean $ mvn test $ mvn install $ mvn deploy
- 94.
- 95.
- 96. { the details} Task runners
- 97. Task runners automateeverything that can be automated compile css/sass, optimize images, minification, software verification
- 98.
- 99. like maven vs gradle or configurationvs code use whatever works best for you
- 100. Maven plugin ~=grunt / gulp plugin Maven build phase ~= grunt task Gradle task ~= gulp task ~= != =
- 101.
- 102.
- 103. PART 4: Builda modern web application Development Workflow
- 104. Just need to addthe 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 bea headache...
- 107.
- 108.
- 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.
- 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 cleaninstall < lots of lines emitted… >
- 113. $ mvn tomcat:run <lots of lines emitted… >
- 115.
- 116.
- 117. Nice! Just need totweak the background color
- 118. $ mvn cleaninstall F5 $ mvn tomcat:run Duke #something { background: papayawhip; }
- 119. Nice! Just need tomove #something 1px
- 120. OMG! Nice! Just need tomove #something 1px
- 121.
- 122.
- 123.
- 124. { why itis different } Development Workflow
- 125.
- 126.
- 127.
- 128. NO in the realworld
- 129. code, build, test,preview
- 130. code build, testdeploy preview
- 131.
- 132. mvn install mvndeploy CI build artifact integration test performance test publish artifact build container publish container deploy container preview
- 133. PART 6: Builda modern web application Scaffolding
- 134. $ mvn archetype:create -DgroupId=[yourproject's group id] -DartifactId=[your project's artifact id] -DarchetypeArtifactId=maven-archetype-j2ee-simple
- 135.
- 136.
- 137. { the details} Scaffolding
- 138.
- 139.
- 140.
- 141.
- 142.
- 143. 7 years advantage translatedfrom INTERNET TIME is like 18,000 years before current era
- 144. SURPRISINGLY Number of generators MAVEN1648 YEOMAN 4148
- 145. Maven archetypes OLD LEGACY NO ECOSYSTEM FRONTENDTHE BACKEND WAY
- 146. Yeoman generators VIBRANT ACTUALLY USED GOODECOSYSTEM MOSTLY FOR FRONTEND
- 147. THE FUTURE MAYBE… As Yeoman beats maven archetypes <ironic> In the future node is required to create a java project </ironic>
- 148. TIP OF THEDAY About to develop a maven archetype? Is it the right tool? Have you evaluated Yeoman?
- 149.
- 150. Maven plugins ~=grunt / gulp Maven plugins ~= npm Maven life cycles ~= grunt Maven dependencies ~= bower Maven archetypes = yo
- 151. Back-end tooling IS NOT aperfect match for WEB DEVELOPMENT
- 152. #1 The structure ofa web application is lean
- 153. #2 Dependencies for theweb needs to be flat
- 154. #3 The development workflowis very different
- 155. #4 Scaffolding for theweb is awesome
- 156. #5 Java tools hasbeen polished Web tools are evolving
- 157.
- 158. + favorite package managerand task runner +
- 159. ROGER THAT! ...if Ionly could convince the back-end team that defines the build process
- 160.
- 161. As you (should) RELEASE thefrontend independently YOU CAN USE THE RIGHT TOOLS and embrace the frontend workflow
- 162. KEY POINT Don’t wrangleyour front-end code into the backend build process
- 163.
- 164.
- 165. Novice Advanced beginner Competent Proficient Expert Please allow meto introduce myself. I'm a man of wealth and taste Pleased to meet you. Hope you guess my name
- 166. Your mission ifyou choose to accept it EXPERIMENT WE RECOMMEND THE EASY WAY
- 167. Q & A PeterLindh Rikard Thulin @peterlindh @rikard_thulin