Front End Development for Back End Java Developers - NYJavaSIG 2019

Front End Development for Back End Java Developers - NYJavaSIG 2019

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

72a2082c6a4dd79ad68befb3db911616?s=128

Matt Raible

July 24, 2019
Tweet

Transcript

  1. 1.

    Front End Development for Back End Java Developers July 24,

    2019 Matt Raible · @mraible Photo by NeyZan https://www.flickr.com/photos/neyzan/4361787733
  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.
  4. 4.
  5. 7.

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

    OAuth 2.0 Overview Today’s Agenda JavaScript / TypeScript Build Tools

    JavaScript Frameworks CSS Progressive Web Apps JHipster
  7. 14.
  8. 15.
  9. 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
  10. 21.
  11. 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
  12. 24.

    Front End Build Tools Old School: Gulp New School: SystemJS

    Hip: Webpack Web Dependencies: Old School: Bower New School: npm Hip: yarn
  13. 25.

    Yeoman The web's scaffolding tool for modern webapps Helps you

    kickstart new projects Promotes the Yeoman workflow yeoman.io
  14. 28.
  15. 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>
  16. 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'] } } ] } };
  17. 34.
  18. 35.
  19. 37.
  20. 39.
  21. 44.
  22. 46.

    @spring_io #springio17 GitHub Stars July 2019 0 40,000 80,000 120,000

    160,000 Angular Backbone Knockout Ember Polymer React Vue
  23. 48.

    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>
  24. 49.

    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 { }
  25. 50.

    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);
  26. 51.
  27. 55.

    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
  28. 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);
  29. 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> ); }
  30. 61.
  31. 65.

    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>
  32. 67.

    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>
  33. 68.
  34. 70.
  35. 71.
  36. 75.

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

    padding: 20px; } .blog-post > p:first { font-weight: 400; } img + span.caption { font-style: italic; }
  37. 76.

    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
  38. 80.

    CSS Framework Stars on GitHub July 2019 0 35,000 70,000

    105,000 140,000 Bootstrap Foundation Pure Skeleton Material Components
  39. 82.

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

    and CSS Far Future Expires Headers Code Minification Optimize Images
  40. 83.

    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
  41. 84.

    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>"); } } }
  42. 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
  43. 94.

    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
  44. 96.

    “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
  45. 97.
  46. 98.

    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
  47. 103.

    @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! ✨
  48. 105.
  49. 107.

    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
  50. 108.

    What You Learned ES6 and TypeScript Node.js and nvm Angular,

    React, and Vue CSS and Sass Front End Performance Optimization Progressive Web Apps
  51. 109.

    TRY

  52. 110.

    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…
  53. 111.