The complexity of frontend web development has increased measurably. Gone are the days of jQuery. New frameworks like React and Vue and tools like Webpack are the new deal. In this talk, we will try to make sense of the current state of front-end development and how it changes how we write backend code. More specifically, we will see how Symfony and Laravel help us in that regard.

1. Making sense of
the front-end
for PHP developers

2. About me
web developer consultant
PHP + JavaScript
@LuizBrandaoJr

4. Topics
● Front-end in general
● Tools of the trade
● Key technologies
● Development workflow
● Integration with PHP

5. Why is front-end hard?
● Browsers!
● Cross-browser issues
● Different technologies
● Complex applications
● User experience
● Non-developers

6. The holy trinity
● HTML : structure
● CSS : presentation
● JavaScript : behavior

7. HTML5
& Friends
Web APIs

8. ● Semantics
● Connectivity
● Offline and storage
● Multimedia
● 2D/3D graphics and effects
● Performance and integration
● Device access
● Styling

9. JavaScript
it’s everywhere
● Client side scripting language
● Also runs on the server
● Impossible to keep up with

10. ECMAScript
the standard
ES is simply short for ECMAScript
● ES2015
● ES6
● They are the same!
● ES2016 (ES7)
● ES2017 (ES8)
● ES.Next
European Computer Manufacturers Association

12. Babel
ES.Next, today
● JavaScript compiler
● Transform syntax
● Polyfills
● Plugins / Presets

14. TypeScript
because we all want types
● Superset of JavaScript
● Optional strong-typing
● Compiles to plain JavaScript
● Integrates with Babel
● Popular

16. CSS
Preprocessors
styles on steroids
● Sass (SCSS)
● Less
● Stylus
● Use logic in CSS
● Nesting
● Inheritance
● Functions
● Different syntax

18. PostCSS
transforming styles with JS
● Kinda like Babel for CSS
● Use modern CSS
● Lots of plugins:
○ auto-prefixing
○ dead css removal

20. Frameworks
I’m down for it
● Pure JavaScript frameworks
● UI / CSS frameworks

21. UI / CSS
Frameworks
now make it pretty
Provide collection of components
ready to use:
● Bootstrap
● Semantic-UI
● Foundation
● Bulma
● Vuetify

22. JavaScript
Frameworks
somebody help me
Most popular:
● React
● Vue.js
● Angular
Why:
● Help create interactive UIs
● Organize the application

24. What about
jQuery?
it was fun while it lasted

25. Node.js
-_-
● JavaScript runtime
● V8 JavaScript engine (Chrome)
● Required by most tools

26. Package
Managers
it’s like Composer
● npm
● yarn
package.json
PHP: composer.json
package-lock.json
yarn.lock
PHP: composer.lock
node_modules
PHP: vendor

28. Build Tools
put all the shiny things together
● Task Runners
● Bundle/Module Managers

29. Task Runners
it’s time to automate
● Grunt
● Gulp

30. Bundle
Managers
are we there yet?
● Webpack
● Parcel
● Rollup
● Browserify

33. Webpack
the almighty
Most popular static module bundler
Core concepts:
● Entry
● Output
● Loaders
● Plugins
● Mode
● Browser compatibility

34. Most popular static module bundler
Core concepts:
● Entry
● Output
● Loaders
● Plugins
● Mode
● Browser compatibility

36. Configuration
Wrappers
ok, go on...
● Webpack Encore by Symfony
● Laravel Mix

37. Laravel
Mix
finally some PHP?
● JavaScript package
● Easy Webpack integration
● Asset compilation
● Includes PHP helper functions
● Bundled with Laravel

39. Symfony
Webpack Encore
gimme some of that
● Same concept as Laravel Mix
● Integrates with Symfony
composer require webpack-encore-bundle

42. Asset Versioning
burst that cache
app.js
mix.version()
app.js?id=8e5c48eadbfdd5458ec6
{{ mix(‘js/app.js’) }}
Encore.enableVersioning()
app.123abc.js
{{ asset('build/images/logo.png') }}
{{ encore_entry_script_tags('app') }}

45. Questions?
be nice