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.

Front End Development for Back End Java Developers - South West Java 2019

74 views

Published on

Are you a backend Java developer that's being pushed into front-end development? Are you frustrated with all the JavaScript frameworks and build tools you have to learn to be a good UI developer? If so, this session is for you! We'll explore the landscape of UI development, including web standards, frameworks, and what’s on the horizon (e.g., micro frontends).

Published in: Software
  • Be the first to comment

  • Be the first to like this

Front End Development for Back End Java Developers - South West Java 2019

  1. 1. Front End Development for Back End Java Developers September 3, 2019 Matt Raible · @mraible Photo by Gerry Fox https://www.flickr.com/photos/gerryfox/34892702975
  2. 2. Blogger on raibledesigns.com and 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
  3. 3. developer.okta.com
  4. 4. Authentication Standards
  5. 5. What about You? How many 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?
  6. 6. OAuth 2.0 Overview Today’s Agenda JavaScript / TypeScript Build Tools JavaScript Frameworks CSS Progressive Web Apps JHipster
  7. 7. My Web Dev Journey
  8. 8. What is modern front end development?
  9. 9. Web Frameworks Over the Years github.com/mraible/history-of-web-frameworks-timeline
  10. 10. JSF zeroturnaround.com/webframeworksindex ❤
  11. 11. JavaScript Framework Explosion
  12. 12. Let’s do some learning!
  13. 13. ES6, ES7 and TypeScript ES5: es5.github.io ES6: git.io/es6features ES7: bit.ly/es7features TS: www.typescriptlang.org TSES7ES6ES5
  14. 14. caniuse.com/#search=es5
  15. 15. caniuse.com/#search=es6
  16. 16. 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
  17. 17. bus.ts
  18. 18. TypeScript 2.3+
  19. 19. “Node.js is a JavaScript 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
  20. 20. Front End Build Tools Old School: Gulp New School: SystemJS Hip: Webpack Web Dependencies: Old School: Bower New School: npm Hip: yarn
  21. 21. Yeoman The web's scaffolding tool for modern webapps Helps you kickstart new projects Promotes the Yeoman workflow yeoman.io
  22. 22. Browsersync browsersync.io
  23. 23. Gulp gulp.task('serve', function() { browserSync.init({ server: './app' }); gulp.watch(['app/**/*.js', 'app/**/*.css', 'app/**/*.html']) .on('change', browserSync.reload); });
  24. 24. Webpack
  25. 25. 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>
  26. 26. 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'] } } ] } };
  27. 27. webpack.academy
  28. 28. xkcd.com/303/
  29. 29. Leading JavaScript Frameworks in 2019 angular.io reactjs.org vuejs.org
  30. 30. “Angular and React dominate: Nothing else even comes close.”
  31. 31. “2018: The Year of React React won the popularity battle in 2017.”
  32. 32. “React kept a firm grip on its lead in 2018.”
  33. 33. Crunch the Numbers
  34. 34. @spring_io #springio17 Hot Frameworks hotframeworks.com
  35. 35. @spring_io #springio17 Hot Frameworks hotframeworks.com
  36. 36. @spring_io #springio17 Jobs on Indeed (UK) September 2019 0 1,000 2,000 3,000 4,000 Vue React Angular
  37. 37. @spring_io #springio17 Jobs on Indeed (US) September 2019 0 2,750 5,500 8,250 11,000 Vue React Angular
  38. 38. @spring_io #springio17 Stack Overflow Tags September 2019 0 50,000 100,000 150,000 200,000 Vue React Angular
  39. 39. @spring_io #springio17 GitHub Stars September 2019 0 40,000 80,000 120,000 160,000 Angular Backbone Knockout Ember Polymer React Vue
  40. 40. @spring_io #springio17 GitHub Star Growth star-history.t9t.io/#angular/angular&facebook/react&vuejs/vue
  41. 41. Hello World with Angular import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>` }) export class AppComponent { name = 'World'; } <my-app></my-app>
  42. 42. 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 { }
  43. 43. Hello World with Angular 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);
  44. 44. Angular CLI
  45. 45. Angular CLI
  46. 46. Ionic Framework
  47. 47. ng-book A comprehensive guide to 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
  48. 48. Authentication with Angular
  49. 49. Hello World with React codepen.io/gaearon/pen/ZpvBNJ?editors=0100 <div id="root"></div> <script> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') ); </script>
  50. 50. Learning React vimeo.com/213710634
  51. 51. 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);
  52. 52. 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> ); }
  53. 53. Create React App
  54. 54. Create React App
  55. 55. Authentication with React
  56. 56. Hello World with Vue.js jsfiddle.net/chrisvfritz/50wL7mdz/ <div id="app"> <p>{{ message }}</p> </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }); </script>
  57. 57. Learning Vue.js youtu.be/utJGnK9D_UQ
  58. 58. Vue.js Code <script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="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>
  59. 59. Getting Started
  60. 60. Vue CLI
  61. 61. Vue CLI
  62. 62. Authentication with Vue
  63. 63. Server-Side Support Angular Universal merged into Angular 4 mobile.twitter.com Nuxt.js
  64. 64. Server-Side Java Support
  65. 65. Cascading Style Sheets #app { background: #eee; } .blog-post { padding: 20px; } .blog-post > p:first { font-weight: 400; } img + span.caption { font-style: italic; }
  66. 66. Sass: Syntactically Awesome Style Sheets #app { background: #eee; .blog-post { padding: 20px; > p:first { font-weight: 400; } img + span.caption { font-style: italic; } } } sass-lang.com
  67. 67. CSS Frameworks
  68. 68. Bootstrap 4
  69. 69. Bootstrap 4
  70. 70. CSS Framework Stars on GitHub September 2019 0 35,000 70,000 105,000 140,000 Bootstrap Foundation Pure Skeleton Angular Material Material UI
  71. 71. CSS Framework Star History star-history.t9t.io
  72. 72. Front End Performance Optimization Reduce HTTP Requests Gzip HTML, JavaScript, and CSS Far Future Expires Headers Code Minification Optimize Images
  73. 73. HTTP/2 Binary, instead of textual 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
  74. 74. HTTP/2 Server Push in 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>"); } } }
  75. 75. twitter.com/kosamari/status/859958929484337152
  76. 76. twitter.com/kosamari/status/859958929484337152
  77. 77. twitter.com/kosamari/status/859958929484337152
  78. 78. Chrome Developer Tools Follow Umar Hansa - @umaar Follow Addy Osmani - @addyosmani
  79. 79. Framework Tools Angular Augury React Developer Tools vue-devtools
  80. 80. Progressive Web Apps
  81. 81. “We’ve failed on mobile” — Alex Russell youtu.be/K1SFnrf4jZo
  82. 82. Mobile Hates You! How to 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
  83. 83. The PRPL Pattern Push Render Pre-cache Lazy-load
  84. 84. The PRPL Pattern Push critical resources for the initial URL route Render initial route Pre-cache remaining routes Lazy-load and create remaining routes on demand
  85. 85. Learn More About PWAs developer.okta.com/blog/2017/07/20/the-ultimate-guide-to-progressive-web-applications
  86. 86. “Reusable UI widgets created 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
  87. 87. Security: OWASP Top 10 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
  88. 88. 🔥 Micro Frontends micro-frontends.org
  89. 89. 🔥 Micro Frontends micro-frontends.org
  90. 90. Micro Frontends martinfowler.com/articles/micro-frontends.html
  91. 91. single-spa single-spa.js.org
  92. 92. @spring_io #springio17 JHipster jhipster.tech JHipster is a development platform to generate, develop and deploy  Spring Boot + Angular/React Web applications and Spring microservices.  and Vue! ✨
  93. 93. Get Started with JHipster 6 Demo https://github.com/mraible/jhipster6-demo | https://youtu.be/uQqlO3IGpTU
  94. 94. JHipster 6 Tutorials and Videos Monolith github.com/mraible/jhipster6-demo Microservices developer.okta.com/blog/2019/05/23/java- microservices-spring-cloud-config
  95. 95. The JHipster Mini-Book Written with 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
  96. 96. What You Learned ES6 and TypeScript Node.js and nvm Angular, React, and Vue CSS and Sass Front End Performance Optimization Progressive Web Apps
  97. 97. TRY
  98. 98. Action! Don’t be afraid to try new things Learn JavaScript or TypeScript Try one of these frameworks Form your own opinions Or just wait a few months…
  99. 99. developer.okta.com/blog/ @oktadev
  100. 100. Questions? Keep in touch! raibledesigns.com @mraible Presentations speakerdeck.com/mraible Code github.com/oktadeveloper
  101. 101. developer.okta.com

×