Front End Development for Back End Java Developers - Jfokus 2020
0 likes193 views
The document is a presentation about front end development for back end Java developers. It discusses topics like JavaScript, TypeScript, build tools, CSS frameworks, front end performance, and progressive web apps. It also provides introductions and comparisons of popular JavaScript frameworks like Angular, React, and Vue. The presentation encourages attendees to learn new front end skills and try building something with a front end framework.
![Gulp
gulp.task('serve', function() {
browserSync.init({
server: './app'
});
gulp.watch(['app/**/*.js', 'app/**/*.css', 'app/**/*.html'])
.on('change', browserSync.reload);
});](https://image.slidesharecdn.com/frontenddevelopmentforbackendjavadevelopers-jfokus2020-200204094153/85/Front-End-Development-for-Back-End-Java-Developers-Jfokus-2020-27-320.jpg)
![webpack.conïŹg.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']
}
}
]
}
};](https://image.slidesharecdn.com/frontenddevelopmentforbackendjavadevelopers-jfokus2020-200204094153/85/Front-End-Development-for-Back-End-Java-Developers-Jfokus-2020-30-320.jpg)
![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 { }](https://image.slidesharecdn.com/frontenddevelopmentforbackendjavadevelopers-jfokus2020-200204094153/85/Front-End-Development-for-Back-End-Java-Developers-Jfokus-2020-53-320.jpg)
Front End Development for Back End Java Developers - Jfokus 2020
- 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
- 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
- 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 TSES7ES6ES5
- 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 eïŹcient. 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 scaïŹolding tool for modern webapps Helps you kickstart new projects Promotes the Yeoman workïŹow yeoman.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.conïŹg.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
- 36. âAngular and React dominate: Nothing else even comes close.â
- 38. â2018: The Year of React React won the popularity battle in 2017.â
- 40. âReact kept a ïŹrm grip on its lead in 2018.â
- 42. âReact Dominated 2019, and Will Probably Dominate 2020â
- 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 OverïŹow 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
- 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);
- 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
- 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>
- 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> ); }
- 66. Create React App
- 67. Create React App
- 69. Hello World with Vue.js jsïŹddle.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>
- 72. Getting Started
- 73. Vue CLI
- 74. Vue CLI
- 76. Server-Side Support Angular Universal merged into Angular 4 mobile.twitter.com Nuxt.js
- 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 MiniïŹcation 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
- 91. âWeâve failed on mobileâ â Alex Russell youtu.be/K1SFnrf4jZo
- 92. Mobile Hates You! How to ïŹght 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
- 96. Security: OWASP Top 10 1. Injection 2. Broken Auth & Session Mgmt 3. Cross-Site Scripting (XSS) 4. Broken Access Control 5. Security MisconïŹguration 6. Sensitive Data Exposure 7. InsuïŹcient 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
- 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
- 104. JHipster 6 Tutorials and Videos Monolith github.com/mraible/jhipster6-demo Microservices developer.okta.com/blog/2019/05/23/java- microservices-spring-cloud-conïŹg
- 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
- 112. developer.okta.com