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

Front End Development for Back End Developers - Devoxx UK 2017

Front End Development for Back End Developers - Devoxx UK 2017

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 12, 2017

More Decks by Matt Raible

Other Decks in Technology


  1. Matt Raible • @mraible Front End Development for Back End

  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. #DevoxxUK Authentication Standards

  6. #DevoxxUK 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. #DevoxxUK What is modern front end development?

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

  10. #DevoxxUK JavaScript Framework Explosion

  11. None
  12. None
  13. #DevoxxUK Let’s do some learning!

  14. #DevoxxUK ES6, ES7 and TypeScript ES5: es5.github.io ES6: git.io/es6features ES7:

    bit.ly/es7features TS: www.typescriptlang.org TS ES7 ES6 ES5
  15. None
  16. None
  17. #DevoxxUK 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
  18. #DevoxxUK bus.ts

  19. #DevoxxUK TypeScript 2.3

  20. “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
  21. #DevoxxUK Front End Build Tools Old School: Gulp New School:

    SystemJS Hip: Webpack Web Dependencies: Old School: Bower New School: npm Hip: yarn
  22. #DevoxxUK Yeoman The web's scaffolding tool for modern webapps Helps

    you kickstart new projects Promotes the Yeoman workflow yeoman.io
  23. #DevoxxUK Browsersync browsersync.io

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

    'app/**/*.css', 'app/**/*.html']) .on('change', browserSync.reload); });
  25. #DevoxxUK Webpack

  26. #DevoxxUK 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. #DevoxxUK Cool Webpack Features webpack-bundle-analyzer webpack-dashboard

  28. #DevoxxUK 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
  29. https://xkcd.com/303/

  30. #DevoxxUK Leading JavaScript Frameworks in 2017 angular.io facebook.github.io/react vuejs.org

  31. None
  32. None
  33. #DevoxxUK Jobs on Indeed May 2017 0 2,000 4,000 6,000

    8,000 Angular Aurelia Backbone Ember Knockout React Vue
  34. #DevoxxUK Stack Overflow Tags May 2017 0 12,500 25,000 37,500

    50,000 Angular Aurelia Backbone Knockout Ember React Vue
  35. #DevoxxUK GitHub Stars May 2017 0 17,500 35,000 52,500 70,000

    Angular Aurelia Backbone Knockout Ember React Vue
  36. #DevoxxUK 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
  37. #DevoxxUK 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 { }
  38. #DevoxxUK 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);
  39. None
  40. #DevoxxUK Angular CLI

  41. #DevoxxUK Angular CLI

  42. #DevoxxUK 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
  43. #DevoxxUK Angular and Angular CLI Demos https://github.com/mraible/ng-demo https://youtu.be/Jq3szz2KOOs (Building) https://youtu.be/TksyjxipM4M

  44. #DevoxxUK Authentication with OpenID Connect http://developer.okta.com http://bit.ly/ng-okta youtube.com/watch?v=Kb56GzQ2pSk

  45. None
  46. #DevoxxUK 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
  47. #DevoxxUK 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>
  48. #DevoxxUK Learning React https://vimeo.com/213710634

  49. #DevoxxUK 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);
  50. #DevoxxUK 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> ); }
  51. None
  52. #DevoxxUK Create React App

  53. #DevoxxUK Create React App

  54. #DevoxxUK Ships with documentation!

  55. #DevoxxUK 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>
  56. #DevoxxUK Learning Vue.js https://youtu.be/utJGnK9D_UQ

  57. #DevoxxUK 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>
  58. None
  59. #DevoxxUK Vue CLI

  60. #DevoxxUK Vue CLI

  61. #DevoxxUK Server-Side Support Angular Universal merged into Angular 4 mobile.twitter.com

  62. #DevoxxUK Server-Side Java Support

  63. None
  64. None
  65. #DevoxxUK Cascading Style Sheets #app { background: #eee; } .blog-post

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

  68. #DevoxxUK Bootstrap 4

  69. #DevoxxUK Bootstrap 4

  70. #DevoxxUK CSS Framework Stars on GitHub May 2017 0 30,000

    60,000 90,000 120,000 Bootstrap Foundation Pure Skeleton
  71. #DevoxxUK Front End Performance Optimization Reduce HTTP Requests Gzip HTML,

    JavaScript, and CSS Far Future Expires Headers Code Minification Optimize Images
  72. #DevoxxUK 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
  73. #DevoxxUK 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); }); } }
  74. None
  75. #DevoxxUK 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>"); } } }
  76. https://twitter.com/kosamari/status/859958929484337152

  77. None
  78. None
  79. #DevoxxUK Chrome Developer Tools Follow Umar Hansa - @umaar Follow

    Addy Osmani - @addyosmani
  80. #DevoxxUK Progressive Web Apps

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

  83. #DevoxxUK 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
  84. #DevoxxUK The PRPL Pattern Push Render Pre-cache Lazy-load

  85. #DevoxxUK 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
  86. developer.okta.com/blog

  87. #DevoxxUK 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. #DevoxxUK JHipster jhipster.github.io

  89. None
  90. #DevoxxUK 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
  91. #DevoxxUK 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
  92. #DevoxxUK Try

  93. #Devoxx4Kids

  94. #DevoxxUK 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
  95. #DevoxxUK 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!
  96. #DevoxxUK Unit Test Example

  97. #DevoxxUK bus.spec.ts

  98. #DevoxxUK Jest facebook.github.io/jest

  99. #DevoxxUK 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…
  100. None
  101. developer.okta.com/blog

  102. #DevoxxUK Questions? Keep in touch! raibledesigns.com @mraible Presentations speakerdeck.com/mraible Code