Modern Frontend Engineering
summary
Walkthrough of a working front-end workflow that boots a new app with yo webapp generator wired to Bower and npm, runs Grunt/Gulp pipelines that lint, run Babel, test (Mocha/Karma), concatenate and minify into a dist with one CSS and one JS, and serves a live preview via grunt serve. Compares raw jQuery to TodoMVC comparisons implemented in Angular/Ember/React, shows JHipster bridging Spring + Angular, and measures performance with PageSpeed/PSI and WebPageTest; demos build and optimized output successfully.
AI-written summary · about
chapters (26)
- 0:00Modern front end challenges
- 1:45Tools for modern workflow
- 3:48Automating with grunt and gulp
- 5:58Grunt vs gulp comparison
- 7:23Package management with bower
- 10:05Advanced dependency management
- 10:34Scaffolding with yeoman
- 12:39Live demo: scaffolding a project
- 15:11Building and optimizing projects
- 17:46Grunt configuration details
- 22:09Implementing MVC with jQuery
- 29:09Angular MVC implementation
- 34:01Ember and react examples
- 39:41React starter kits
- 41:08Fullstack development with JHipster
- 44:25Modern languages and preprocessors
- 46:41UI frameworks and responsive design
- 50:24Semantic UI and component libraries
- 52:13Angular UI and react extensions
- 53:54Testing and server configuration
- 55:57Email templates and analytics
- 58:05Performance as a feature
- 59:24Best practices for fast web apps
- 1:01:13Performance auditing with PSI
- 1:02:45Transitioning to HTTP/2
- 1:03:48Testing with WebPageTest and Q&A
related talks
40mFRONTEND CHOICES
38mEmbrace the frontend revolution
49mFront Ends for Back End Developers
46mMicro Frontend: the microservice puzzle extended to frontend
29mManaging a Large Front-End Project with Automated Build Tools
34mHow to build front-end web apps that scale
01h 20mCreating modular test driven SPAs with Spring and AngularJS
51mBuilding Amazing Single Page Applications the Right Way