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.
Front End Development for Back End Developers - Devoxx UK 2017
1. Matt Raible • @mraible
Front End Development for Back End Developers
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. #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?
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
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
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>
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);
});
}
}
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
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
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!