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 frontend development (npm, yarn, Gulp, Webpack, Yeoman) and learn the basics of HTML, CSS, and JavaScript. This presentation dives into the intricacies of Bootstrap, Material Design, ES6, and TypeScript. Finally, after getting you up to speed with all this new tech, I'll show how it can all be found and integrated through the fine and dandy JHipster project.

1. Matt Raible | @mraible
Front End Development for Back End Developers
July 21, 2017 #UberConf17

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

6. Authentication Standards

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?

8. My Web Dev Journey

9. What is modern front end development?

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

11. JSF
https://zeroturnaround.com/webframeworksindex
❤

12. JavaScript Framework Explosion

15. Let’s do some learning!

16. ES6, ES7 and TypeScript
ES5: es5.github.io
ES6: git.io/es6features
ES7: bit.ly/es7features
TS: www.typescriptlang.org
TSES7ES6ES5

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

20. bus.ts

21. TypeScript 2.3

22. “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

23. Front End Build Tools
Old School: Gulp
New School: SystemJS
Hip: Webpack
Web Dependencies:
Old School: Bower
New School: npm
Hip: yarn

24. Yeoman
The web's scaffolding tool for modern webapps
Helps you kickstart new projects
Promotes the Yeoman workflow
yeoman.io

25. Browsersync browsersync.io

26. Gulp
gulp.task('serve', function() {
browserSync.init({
server: './app'
});
gulp.watch(['app/**/*.js', 'app/**/*.css', 'app/**/*.html'])
.on('change', browserSync.reload);
});

27. Webpack

28. 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']
}
}
]
}
};

29. Cool Webpack Features
webpack-bundle-analyzer
webpack-dashboard

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

31. https://xkcd.com/303/

32. Leading JavaScript Frameworks in 2017
angular.io
facebook.github.io/react
vuejs.org

35. Jobs on Indeed
July 21, 2017
0
2,000
4,000
6,000
8,000
Angular Aurelia Backbone Ember Knockout React Vue

36. Stack Overflow Tags
July 21, 2017
0
17,500
35,000
52,500
70,000
Angular Aurelia Backbone Knockout Ember React Vue

37. Stack Overflow Trends
https://stackoverflow.blog/2017/05/09/introducing-stack-overflow-trends

38. GitHub Stars
July 21, 2017
0
20,000
40,000
60,000
80,000
Angular Aurelia Backbone Knockout Ember React Vue

39. GitHub Star History
https://github.com/timqian/star-history

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

41. 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 { }

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

44. Angular CLI

45. Angular CLI

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

47. Angular and Angular CLI Demos
https://github.com/mraible/ng-demo
https://youtu.be/Jq3szz2KOOs
(Building)
https://youtu.be/TksyjxipM4M
(Testing)

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

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

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

52. Learning React
https://vimeo.com/213710634

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

54. 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>
);
}

56. Create React App

57. Create React App

58. Ships with documentation!

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

60. Learning Vue.js
https://youtu.be/utJGnK9D_UQ

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

63. Vue CLI

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

65. Server-Side Java Support

68. Cascading Style Sheets
#app {
background: #eee;
}
.blog-post {
padding: 20px;
}
.blog-post > p:first {
font-weight: 400;
}
img + span.caption {
font-style: italic;
}

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

70. CSS Frameworks

71. Bootstrap 4

72. Bootstrap 4

73. CSS Framework Stars on GitHub
July 21, 2017
0
30,000
60,000
90,000
120,000
Bootstrap Foundation Pure Skeleton

74. CSS Framework Star History
https://github.com/timqian/star-history

75. Front End Performance Optimization
Reduce HTTP Requests
Gzip HTML, JavaScript, and CSS
Far Future Expires Headers
Code Minification
Optimize Images

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

77. 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);
});
}
}

79. 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>");
}
}
}

80. https://twitter.com/kosamari/status/859958929484337152

83. Chrome Developer Tools
Follow Umar Hansa - @umaar
Follow Addy Osmani - @addyosmani

84. Framework Tools
Angular Augury
React Developer Tools
vue-devtools

85. Progressive Web Apps

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

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

89. The PRPL Pattern
Push
Render
Pre-cache
Lazy-load

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

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

93. JHipster jhipster.github.io

94. Get Started with JHipster 4 Demo

96. JHipster 4 Tutorials and Videos
Monolith
https://github.com/mraible/jhipster4-demo
Microservices
https://developer.okta.com/blog/2017/06/20/develop-
microservices-with-jhipster

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

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

99. Try

100. #Devoxx4Kids

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

102. 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!

103. Unit Test Example

104. bus.spec.ts

105. Jest facebook.github.io/jest

106. 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…

108. developer.okta.com/blog/

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