Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Front Ends for Back End Developers - Spring IO 2017

Front Ends for Back End Developers - Spring IO 2017

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

Are you a backend developer that’s being pushed into front end development? Are you frustrated with all 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 tools of the trade for fronted development (npm, yarn, Gulp, Webpack, Yeoman) and learn the basics of HTML, CSS, and JavaScript. We’ll dive into the intricacies of Bootstrap, Material Design, ES6, and TypeScript. Finally, after getting you up to speed with all this new tech, we’ll show how it can all be found and integrated through the fine and dandy JHipster project.

Matt Raible

May 18, 2017

More Decks by Matt Raible

Other Decks in Technology


  1. @spring_io #springio17 Front End Development for Back End Developers 

    Matt Raible @mraible
  2. Blogger on raibledesigns.com Web Developer and Java Champion Father, Skier,

    Mountain Biker, Whitewater Rafter Open Source Connoisseur Who is Matt Raible? Bus Lover Okta Developer Advocate
  3. None
  4. None
  5. @spring_io #springio17 @spring_io #springio17 Authentication Standards

  6. @spring_io #springio17 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?
  7. My Web Dev Journey

  8. @spring_io #springio17 What is modern front end development?

  9. @spring_io #springio17 Web Frameworks Over the Years https://github.com/mraible/history-of-web-frameworks-timeline

  10. @spring_io #springio17 @spring_io #springio17 JSF https://zeroturnaround.com/webframeworksindex ❤

  11. @spring_io #springio17 JavaScript Framework Explosion

  12. None
  13. None
  14. @spring_io #springio17 Let’s do some learning!

  15. @spring_io #springio17 ES6, ES7 and TypeScript ES5: es5.github.io ES6: git.io/es6features

    ES7: bit.ly/es7features TS: www.typescriptlang.org TS ES7 ES6 ES5
  16. None
  17. None
  18. @spring_io #springio17 TypeScript $ npm install -g typescript function greeter(person:

    string) {
 return "Hello, " + person;
 var user = "Jane User";
 document.body.innerHTML = greeter(user); $ tsc greeter.ts https://www.typescriptlang.org/docs/tutorial.html
  19. @spring_io #springio17 @spring_io #springio17 bus.ts

  20. @spring_io #springio17 TypeScript 2.3

  21. “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.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.” https://nodejs.org https://github.com/creationix/nvm
  22. @spring_io #springio17 Front End Build Tools Old School: Gulp New

    School: SystemJS Hip: Webpack Web Dependencies: Old School: Bower New School: npm Hip: yarn
  23. @spring_io #springio17 Yeoman The web's scaffolding tool for modern webapps

    Helps you kickstart new projects Promotes the Yeoman workflow yeoman.io
  24. @spring_io #springio17 Browsersync browsersync.io

  25. @spring_io #springio17 Gulp gulp.task('serve', function() { browserSync.init({ server: './app' });

    gulp.watch(['app/**/*.js', 'app/**/*.css', 'app/**/*.html']) .on('change', browserSync.reload); });
  26. @spring_io #springio17 Webpack

  27. @spring_io #springio17 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'] } } ] } };
  28. @spring_io #springio17 Cool Webpack Features webpack-bundle-analyzer webpack-dashboard

  29. @spring_io #springio17 webpack for real tasks Building front-end and adding

    compilation Decreasing front-end size and improving assets caching Speeding up build and improving the development workflow iamakulov.com/pages/webpack
  30. https://xkcd.com/303/

  31. @spring_io #springio17 @spring_io #springio17 Leading JavaScript Frameworks in 2017 angular.io

    facebook.github.io/react vuejs.org
  32. None
  33. None
  34. @spring_io #springio17 @spring_io #springio17 Jobs on Indeed May 2017 0

    2,000 4,000 6,000 8,000 Angular Aurelia Backbone Ember Knockout React Vue
  35. @spring_io #springio17 @spring_io #springio17 Stack Overflow Tags May 2017 0

    12,500 25,000 37,500 50,000 Angular Aurelia Backbone Knockout Ember React Vue
  36. @spring_io #springio17 Stack Overflow Trends https://stackoverflow.blog/2017/05/09/introducing-stack-overflow-trends

  37. @spring_io #springio17 @spring_io #springio17 GitHub Stars May 2017 0 17,500

    35,000 52,500 70,000 Angular Aurelia Backbone Knockout Ember React Vue
  38. @spring_io #springio17 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> https://angular.io/docs/ts/latest/quickstart.html
  39. @spring_io #springio17 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 { }
  40. @spring_io #springio17 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);
  41. None
  42. @spring_io #springio17 Angular CLI

  43. @spring_io #springio17 Angular CLI

  44. @spring_io #springio17 Get Started with Angular Angular QuickStart https://angular.io/docs/ts/latest/quickstart.html Angular

    Seed https://github.com/mgechev/angular-seed Angular Seed Advanced https://github.com/NathanWalker/angular-seed-advanced
  45. @spring_io #springio17 Angular and Angular CLI Demos https://github.com/mraible/ng-demo https://youtu.be/Jq3szz2KOOs (Building)

    https://youtu.be/TksyjxipM4M (Testing)
  46. @spring_io #springio17 Authentication with OpenID Connect http://developer.okta.com http://bit.ly/ng-okta youtube.com/watch?v=Kb56GzQ2pSk

  47. None
  48. @spring_io #springio17 ng-book 2 A comprehensive guide to developing with

    Angular 4 Worth all your hard earned $$$ https://www.ng-book.com/2 “Thank you for the awesome book, it's the bible for Angular.” — Vijay Ganta
  49. @spring_io #springio17 Hello World with React http://codepen.io/gaearon/pen/ZpvBNJ?editors=0100 <div id="root"></div> <script>

    ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') ); </script>
  50. @spring_io #springio17 Learning React https://vimeo.com/213710634

  51. @spring_io #springio17 Imperative Code if (count > 99) { if

    (!hasFile()) { 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. @spring_io #springio17 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. None
  54. @spring_io #springio17 Create React App

  55. @spring_io #springio17 Create React App

  56. @spring_io #springio17 @spring_io #springio17 Ships with documentation!

  57. @spring_io #springio17 Hello World with Vue.js https://jsfiddle.net/chrisvfritz/50wL7mdz/ <div id="app"> <p>{{

    message }}</p> </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }); </script>
  58. @spring_io #springio17 @spring_io #springio17 Learning Vue.js https://youtu.be/utJGnK9D_UQ

  59. @spring_io #springio17 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>
  60. None
  61. @spring_io #springio17 Vue CLI

  62. @spring_io #springio17 Vue CLI

  63. @spring_io #springio17 @spring_io #springio17 Server-Side Support Angular Universal merged into

    Angular 4 mobile.twitter.com Nuxt.js
  64. @spring_io #springio17 @spring_io #springio17 Server-Side Java Support

  65. None
  66. None
  67. @spring_io #springio17 Cascading Style Sheets #app { background: #eee; }

    .blog-post { padding: 20px; } .blog-post > p:first { font-weight: 400; } img + span.caption { font-style: italic; }
  68. @spring_io #springio17 Sass: Syntactically Awesome Style Sheets #app { background:

    #eee; .blog-post { padding: 20px; > p:first { font-weight: 400; } img + span.caption { font-style: italic; } } } http://sass-lang.com
  69. @spring_io #springio17 @spring_io #springio17 CSS Frameworks

  70. @spring_io #springio17 @spring_io #springio17 Bootstrap 4

  71. @spring_io #springio17 @spring_io #springio17 Bootstrap 4

  72. @spring_io #springio17 @spring_io #springio17 CSS Framework Stars on GitHub May

    2017 0 30,000 60,000 90,000 120,000 Bootstrap Foundation Pure Skeleton
  73. @spring_io #springio17 Front End Performance Optimization Reduce HTTP Requests Gzip

    HTML, JavaScript, and CSS Far Future Expires Headers Code Minification Optimize Images
  74. @spring_io #springio17 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
  75. @spring_io #springio17 HTTP/2 in JHipster /* * Enable HTTP/2 for

    Undertow - https://twitter.com/ankinson/status/829256167700492288 * HTTP/2 requires HTTPS, so HTTP requests will fallback to HTTP/1.1. * See the JHipsterProperties class and your application-*.yml configuration files * for more information. */ if (jHipsterProperties.getHttp().getVersion().equals(JHipsterProperties.Http.Version.V_2_0)) { if (container instanceof UndertowEmbeddedServletContainerFactory) { ((UndertowEmbeddedServletContainerFactory) container) .addBuilderCustomizers((builder) -> { builder.setServerOption(UndertowOptions.ENABLE_HTTP2, true); }); } }
  76. None
  77. @spring_io #springio17 HTTP/2 Server Push in Java http://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>"); } } }
  78. https://twitter.com/kosamari/status/859958929484337152

  79. None
  80. None
  81. @spring_io #springio17 Chrome Developer Tools Follow Umar Hansa - @umaar

    Follow Addy Osmani - @addyosmani
  82. @spring_io #springio17 Framework Tools Angular Augury React Developer Tools vue-devtools

  83. @spring_io #springio17 @spring_io #springio17 Progressive Web Apps

  84. None
  85. “We’ve failed on mobile” — Alex Russell https://youtu.be/K1SFnrf4jZo

  86. @spring_io #springio17 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
  87. @spring_io #springio17 The PRPL Pattern Push Render Pre-cache Lazy-load

  88. @spring_io #springio17 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
  89. developer.okta.com/blog

  90. @spring_io #springio17 @spring_io #springio17 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
  91. @spring_io #springio17 @spring_io #springio17 JHipster jhipster.github.io

  92. None
  93. @spring_io #springio17 The JHipster Mini-Book 2.0 Release on Dec 5,

    2016 jhipster-book.com 21-points.com @jhipster_book Write your own InfoQ mini-book! github.com/mraible/infoq-mini-book
  94. @spring_io #springio17 What You Learned ES6 and TypeScript Node.js and

    nvm Angular, React, and Vue.js CSS and Sass Front End Performance Optimization Progressive Web Apps
  95. @spring_io #springio17 Try

  96. #Devoxx4Kids

  97. @spring_io #springio17 Quality “A person who knows how to fix

    motorcycles—with Quality—is less likely to run short of friends than one who doesn't. And they aren't going to see him as some kind of object either. Quality destroys objectivity every time.” — Zen and the Art of Motorcycle Maintenance
  98. @spring_io #springio17 Software Testing With motorcycles, you drive to test

    them. With software, you can test it without driving it. Or rather, you can automate the driving. If you don’t automate tests, you’re still testing!
  99. @spring_io #springio17 @spring_io #springio17 Unit Test Example

  100. @spring_io #springio17 @spring_io #springio17 bus.spec.ts

  101. @spring_io #springio17 @spring_io #springio17 Jest facebook.github.io/jest

  102. @spring_io #springio17 Action! Don’t be afraid to try new things

    Learn JavaScript Try one of these frameworks Form your own opinions Or just wait a few months…
  103. None
  104. developer.okta.com/blog

  105. @spring_io #springio17 Questions? Keep in touch! raibledesigns.com @mraible Presentations speakerdeck.com/mraible

    Code github.com/mraible