Front End Development for Back End Java Developers - Jfokus 2020

72a2082c6a4dd79ad68befb3db911616?s=47 Matt Raible
February 04, 2020

Front End Development for Back End Java Developers - Jfokus 2020

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).

YouTube video: https://www.youtube.com/watch?v=DLQqJg393wM

72a2082c6a4dd79ad68befb3db911616?s=128

Matt Raible

February 04, 2020
Tweet

Transcript

  1. Front End Development for Back End Java Developers February 4,

    2020 Matt Raible | @mraible Photo by Magnus Johansson flickr.com/photos/120374925@N06/15885090329
  2. OAuth 2.0 Overview Today’s Agenda JavaScript / TypeScript Build Tools

    JavaScript Frameworks CSS Front End Performance Progressive Web Apps
  3. Blogger on raibledesigns.com and developer.okta.com/blog Web Developer and Java Champion

    Father, Husband, Skier, Mountain Biker, Whitewater Rafter Open Source Connoisseur Who is Matt Raible? Bus Lover Okta Developer Advocate
  4. None
  5. None
  6. developer.okta.com

  7. Authentication Standards

  8. 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?
  9. My Web Dev Journey

  10. What is modern front end development?

  11. Web Frameworks Over the Years github.com/mraible/history-of-web-frameworks-timeline

  12. JSF zeroturnaround.com/webframeworksindex ❤

  13. JavaScript Framework Explosion

  14. None
  15. None
  16. Let’s do some learning!

  17. ES6, ES7 and TypeScript ES5: es5.github.io ES6: git.io/es6features ES7: bit.ly/es7features

    TS: www.typescriptlang.org TS ES7 ES6 ES5
  18. caniuse.com/#search=es5

  19. caniuse.com/#search=es6

  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. bus.ts

  22. TypeScript 2.3+

  23. “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
  24. Front End Build Tools Old School: Gulp New School: SystemJS

    Hip: Webpack Web Dependencies: Old School: Bower New School: npm Hip: yarn
  25. Yeoman The web's scaffolding tool for modern webapps Helps you

    kickstart new projects Promotes the Yeoman workflow yeoman.io
  26. Browsersync browsersync.io

  27. Gulp gulp.task('serve', function() { browserSync.init({ server: './app' }); gulp.watch(['app/**/*.js', 'app/**/*.css',

    'app/**/*.html']) .on('change', browserSync.reload); });
  28. Webpack

  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. webpack.academy

  32. xkcd.com/303/

  33. Leading JavaScript Frameworks in 2020 angular.io reactjs.org vuejs.org

  34. None
  35. None
  36. “Angular and React dominate: Nothing else even comes close.”

  37. None
  38. “2018: The Year of React React won the popularity battle

    in 2017.”
  39. None
  40. “React kept a firm grip on its lead in 2018.”

  41. None
  42. “React Dominated 2019, and Will Probably Dominate 2020”

  43. Crunch the Numbers

  44. @spring_io #springio17 Hot Frameworks hotframeworks.com

  45. @spring_io #springio17 Hot Frameworks hotframeworks.com

  46. @spring_io #springio17 Jobs on Indeed (Sweden) February 2020 0 175

    350 525 700 Vue React Angular
  47. @spring_io #springio17 Jobs on Indeed (US) February 2020 0 2,750

    5,500 8,250 11,000 Vue React Angular
  48. @spring_io #springio17 Stack Overflow Tags February 2020 0 55,000 110,000

    165,000 220,000 Vue React Angular
  49. @spring_io #springio17 GitHub Stars February 2020 0 40,000 80,000 120,000

    160,000 Vue React Angular Svelte
  50. @spring_io #springio17 GitHub Star Growth star-history.t9t.io/#angular/angular&facebook/react&vuejs/vue

  51. @spring_io #springio17 GitHub Star Growth star-history.t9t.io/#angular/angular&facebook/react&vuejs/vue&sveltejs/svelte

  52. 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>
  53. 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 { }
  54. 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);
  55. None
  56. Angular CLI

  57. Angular CLI

  58. Ionic Framework

  59. ng-book A comprehensive guide to developing with Angular 8 Worth

    all your hard earned $$$ newline.co/ng-book/2 “Thank you for the awesome book. It's the bible for Angular.” — Vijay Ganta
  60. Authentication with Angular

  61. 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>
  62. Learning React vimeo.com/213710634

  63. 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);
  64. 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> ); }
  65. None
  66. Create React App

  67. Create React App

  68. Authentication with React

  69. 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>
  70. 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>
  71. None
  72. Getting Started

  73. Vue CLI

  74. Vue CLI

  75. Authentication with Vue

  76. Server-Side Support Angular Universal merged into Angular 4 mobile.twitter.com Nuxt.js

  77. Server-Side Java Support

  78. Cascading Style Sheets #app { background: #eee; } .blog-post {

    padding: 20px; } .blog-post > p:first { font-weight: 400; } img + span.caption { font-style: italic; }
  79. 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
  80. CSS Frameworks

  81. Bootstrap 4

  82. Bootstrap 4

  83. CSS Framework Stars on GitHub February 2020 0 35,000 70,000

    105,000 140,000 Bootstrap Foundation Pure Skeleton Angular Material Material UI Tailwind CSS
  84. CSS Framework Star History star-history.t9t.io

  85. Front End Performance Optimization Reduce HTTP Requests Gzip HTML, JavaScript,

    and CSS Far Future Expires Headers Code Minification Optimize Images
  86. 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
  87. Front-End Performance Checklist 2020 smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages

  88. Chrome Developer Tools Follow Umar Hansa - @umaar Follow Addy

    Osmani - @addyosmani
  89. Framework Tools Angular Augury React Developer Tools vue-devtools

  90. Progressive Web Apps

  91. “We’ve failed on mobile” — Alex Russell youtu.be/K1SFnrf4jZo

  92. 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
  93. 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
  94. “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
  95. None
  96. 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
  97. Micro Frontends micro-frontends.org

  98. Micro Frontends micro-frontends.org

  99. Micro Frontends martinfowler.com/articles/micro-frontends.html

  100. single-spa single-spa.js.org

  101. @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! ✨
  102. Get Started with JHipster 6 Demo github.com/mraible/jhipster6-demo | youtu.be/uQqlO3IGpTU

  103. None
  104. JHipster 6 Tutorials and Videos Monolith github.com/mraible/jhipster6-demo Microservices developer.okta.com/blog/2019/05/23/java- microservices-spring-cloud-config

  105. 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
  106. What You Learned ES6 and TypeScript Node.js and nvm Angular,

    React, and Vue CSS and Sass Front End Performance Optimization Progressive Web Apps
  107. TRY

  108. Action! Don’t be afraid to try new things Learn JavaScript

    or TypeScript Try one of these frameworks Form your own opinions
  109. None
  110. developer.okta.com/blog @oktadev

  111. Questions? Keep in touch! raibledesigns.com @mraible Presentations speakerdeck.com/mraible Code github.com/oktadeveloper

  112. developer.okta.com