Download as PDF, PPTX
![Gulp gulp.task('serve', function() { browserSync.init({ server: './app' }); gulp.watch(['app/**/*.js', 'app/**/*.css', 'app/**/*.html']) .on('change', browserSync.reload); });](https://image.slidesharecdn.com/frontenddevelopmentforbackendjavadevelopers-nyjavasig2019-190725131520/75/Front-End-Development-for-Back-End-Java-Developers-NYJavaSIG-2019-27-2048.jpg)
![webpack.config.js module.exports = { entry: './src/app.js', output: { path: __dirname + '/src/main/webapp/public', filename: 'bundle.js' }, module: { loaders: [ { test: /.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015', 'react'] } } ] } };](https://image.slidesharecdn.com/frontenddevelopmentforbackendjavadevelopers-nyjavasig2019-190725131520/75/Front-End-Development-for-Back-End-Java-Developers-NYJavaSIG-2019-30-2048.jpg)
![Hello World with Angular import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }](https://image.slidesharecdn.com/frontenddevelopmentforbackendjavadevelopers-nyjavasig2019-190725131520/75/Front-End-Development-for-Back-End-Java-Developers-NYJavaSIG-2019-49-2048.jpg)
Uploaded byMatt Raible
Front End Development for Back End Java Developers - NYJavaSIG 2019
The document discusses front-end development techniques for back-end Java developers, focusing on modern frameworks like Angular, React, and Vue, as well as tools like TypeScript, Webpack, and build automation technologies. It provides insights into JavaScript frameworks, performance optimization strategies, and contemporary practices like Progressive Web Applications (PWAs) and micro frontends. The author emphasizes the importance of continuous learning and experimentation in web development.
Front End Development for Back End Java Developers - NYJavaSIG 2019
- 1. Front End Developmentfor Back End Java Developers July 24, 2019 Matt Raible · @mraible Photo by NeyZan https://www.flickr.com/photos/neyzan/4361787733
- 2. Blogger on raibledesigns.comand developer.okta.com/blog Web Developer and Java Champion Father, Skier, Mountain Biker, Whitewater Rafter Open Source Developer + User Who is Matt Raible? Bus Lover Okta Developer Advocate
- 5.
- 6.
- 7. What about You? Howmany consider themselves backend developers? Java, .NET, Python, or Node.js? Do you write code for UIs? Do you like JavaScript? What JavaScript Frameworks do you use?
- 8. OAuth 2.0 Overview Today’sAgenda JavaScript / TypeScript Build Tools JavaScript Frameworks CSS Progressive Web Apps JHipster
- 9. My Web DevJourney
- 10. What is modernfront end development?
- 11. Web Frameworks Overthe Years github.com/mraible/history-of-web-frameworks-timeline
- 12.
- 13.
- 16. Let’s do somelearning!
- 17. ES6, ES7 andTypeScript ES5: es5.github.io ES6: git.io/es6features ES7: bit.ly/es7features TS: www.typescriptlang.org TSES7ES6ES5
- 18.
- 19.
- 20. TypeScript $ npm install-g typescript function greeter(person: string) { return "Hello, " + person; } var user = "Jane User"; document.body.innerHTML = greeter(user); $ tsc greeter.ts typescriptlang.org/docs/tutorial.html
- 21.
- 22.
- 23. “Node.js is aJavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non- blocking I/O model that makes it lightweight and efficient. Node’s package ecosystem, npm, is the largest ecosystem of open source libraries in the world.” nodejs.org github.com/creationix/nvm
- 24. Front End BuildTools Old School: Gulp New School: SystemJS Hip: Webpack Web Dependencies: Old School: Bower New School: npm Hip: yarn
- 25. Yeoman The web's scaffoldingtool for modern webapps Helps you kickstart new projects Promotes the Yeoman workflow yeoman.io
- 26.
- 27. Gulp gulp.task('serve', function() { browserSync.init({ server:'./app' }); gulp.watch(['app/**/*.js', 'app/**/*.css', 'app/**/*.html']) .on('change', browserSync.reload); });
- 28.
- 29. Write and Bundle //bar.js export default function bar() { // code here } // app.js import bar from './bar'; bar(); // webpack.config.js module.exports = { entry: './app.js', output: { filename: 'bundle.js' } } <!-- index.html --> <html> <head> ... </head> <body> ... <script src="bundle.js"></script> </body> </html>
- 30. webpack.config.js module.exports = { entry:'./src/app.js', output: { path: __dirname + '/src/main/webapp/public', filename: 'bundle.js' }, module: { loaders: [ { test: /.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015', 'react'] } } ] } };
- 31.
- 32.
- 33. Leading JavaScript Frameworksin 2019 angular.io reactjs.org vuejs.org
- 36. “Angular and Reactdominate: Nothing else even comes close.”
- 38. “2018: The Yearof React React won the popularity battle in 2017.”
- 40. “React kept afirm grip on its lead in 2018.”
- 41.
- 42.
- 43.
- 44. @spring_io #springio17 Jobs on Indeed(US) July 2019 0 2,750 5,500 8,250 11,000 Vue React Angular
- 45. @spring_io #springio17 Stack Overflow Tags July2019 0 45,000 90,000 135,000 180,000 Vue React Angular
- 46. @spring_io #springio17 GitHub Stars July 2019 0 40,000 80,000 120,000 160,000 AngularBackbone Knockout Ember Polymer React Vue
- 47.
- 48. Hello World withAngular import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>` }) export class AppComponent { name = 'World'; } <my-app></my-app>
- 49. Hello World withAngular import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
- 50. Hello World withAngular import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if (environment.production) { enableProdMode(); } platformBrowserDynamic().bootstrapModule(AppModule);
- 52.
- 53.
- 54.
- 55. ng-book A comprehensive guideto developing with Angular 8 Worth all your hard earned $$$ www.ng-book.com/2 “Thank you for the awesome book. It's the bible for Angular.” — Vijay Ganta
- 56.
- 57. Hello World withReact codepen.io/gaearon/pen/ZpvBNJ?editors=0100 <div id="root"></div> <script> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') ); </script>
- 58.
- 59. Imperative Code if (count> 99) { if (!hasFire()) { addFire(); } } else { if (hasFire()) { removeFire(); } } if (count === 0) { if (hasBadge()) { removeBadge(); } return; } if (!hasBadge()) { addBadge(); } var countText = count > 99 ? "99+" : count.toString(); getBadge().setText(countText);
- 60. Declarative Code if (count=== 0) { return <div className="bell"/>; } else if (count <= 99) { return ( <div className="bell"> <span className="badge">{count}</span> </div> ); } else { return ( <div className="bell onFire"> <span className="badge">99+</span> </div> ); }
- 62.
- 63.
- 64.
- 65. Hello World withVue.js jsfiddle.net/chrisvfritz/50wL7mdz/ <div id="app"> <p>{{ message }}</p> </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }); </script>
- 66.
- 67. Vue.js Code <script src="https://unpkg.com/vue/dist/vue.js"></script> <divid="app"> <button v-on:click="clickedButton()">Click here!</button> </div> <script> new Vue({ el: '#app', methods: { clickedButton: function(event) { console.log(event); alert("You clicked the button!"); } } }); </script>
- 69.
- 70.
- 71.
- 72.
- 73. Server-Side Support Angular Universalmerged into Angular 4 mobile.twitter.com Nuxt.js
- 74.
- 75. Cascading Style Sheets #app{ background: #eee; } .blog-post { padding: 20px; } .blog-post > p:first { font-weight: 400; } img + span.caption { font-style: italic; }
- 76. Sass: Syntactically AwesomeStyle Sheets #app { background: #eee; .blog-post { padding: 20px; > p:first { font-weight: 400; } img + span.caption { font-style: italic; } } } sass-lang.com
- 77.
- 78.
- 79.
- 80. CSS Framework Starson GitHub July 2019 0 35,000 70,000 105,000 140,000 Bootstrap Foundation Pure Skeleton Material Components
- 81. CSS Framework StarHistory star-history.t9t.io
- 82. Front End PerformanceOptimization Reduce HTTP Requests Gzip HTML, JavaScript, and CSS Far Future Expires Headers Code Minification Optimize Images
- 83. HTTP/2 Binary, instead oftextual Fully multiplexed, instead of ordered and blocking Can use one connection for parallelism Uses header compression to reduce overhead Allows servers to “push” responses proactively into client caches
- 84. HTTP/2 Server Pushin Java bit.ly/dz-server-push-java @WebServlet(value = {"/http2"}) public class Http2Servlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) { PushBuilder pushBuilder = req.newPushBuilder(); pushBuilder.path("images/kodedu-logo.png") .addHeader("content-type", "image/png") .push(); try (PrintWriter respWriter = resp.getWriter();) { respWriter.write("<html>" + "<img src='images/kodedu-logo.png'>" + "</html>"); } } }
- 85.
- 86.
- 87.
- 88. Chrome Developer Tools FollowUmar Hansa - @umaar Follow Addy Osmani - @addyosmani
- 89. Framework Tools Angular Augury ReactDeveloper Tools vue-devtools
- 90.
- 91. “We’ve failed onmobile” — Alex Russell youtu.be/K1SFnrf4jZo
- 92. Mobile Hates You! Howto fight back: Implement PRPL Get a ~$150-200 unlocked Android (e.g. Moto G4) Use chrome://inspect && chrome://inspect?tracing Lighthouse DevTools Network & CPU Throttling
- 93.
- 94. The PRPL Pattern Pushcritical resources for the initial URL route Render initial route Pre-cache remaining routes Lazy-load and create remaining routes on demand
- 95. Learn More aboutPWAs developer.okta.com/blog/2017/07/20/the-ultimate-guide-to-progressive-web-applications
- 96. “Reusable UI widgetscreated using open web technology.” - MDN Web Components consists of four technologies: Custom Elements HTML Templates Shadow DOM HTML Imports Web Components https://www.polymer-project.org https://stenciljs.com https://www.webcomponents.org
- 98. Security: OWASP Top10 1. Injection 2. Broken Auth & Session Mgmt 3. Cross-Site Scripting (XSS) 4. Broken Access Control 5. Security Misconfiguration 6. Sensitive Data Exposure 7. Insufficient Attack Protection 8. Cross-Site Request Forgery 9. Components w/ Vulnerabilities 10. Underprotected APIs
- 99. 🔥 Micro Frontendsmicro-frontends.org
- 100. 🔥 Micro Frontendsmicro-frontends.org
- 101.
- 102.
- 103. @spring_io #springio17 JHipster jhipster.tech JHipster isa development platform to generate, develop and deploy Spring Boot + Angular/React Web applications and Spring microservices. and Vue! ✨
- 104. Get Started withJHipster 6 Demo https://github.com/mraible/jhipster6-demo | https://youtu.be/uQqlO3IGpTU
- 106. JHipster 6 Tutorialsand Videos Monolith github.com/mraible/jhipster6-demo Microservices developer.okta.com/blog/2019/05/23/java- microservices-spring-cloud-config
- 107. The JHipster Mini-Book Writtenwith Asciidoctor Quick and to the point, 164 pages Developed a real world app: www.21-points.com Free Download from infoq.com/minibooks/jhipster-mini-book @jhipster_book
- 108. What You Learned ES6and TypeScript Node.js and nvm Angular, React, and Vue CSS and Sass Front End Performance Optimization Progressive Web Apps
- 109.
- 110. Action! Don’t be afraidto try new things Learn JavaScript or TypeScript Try one of these frameworks Form your own opinions Or just wait a few months…
- 112.
- 113.