More Related Content
![Aeternity Blockchain - Ecosystem & Devtools [2019]](https://cdn.slidesharecdn.com/ss_thumbnails/aeternityprezentacjasilesian03-190320155135-thumbnail.jpg?width=560&fit=bounds)
Similar to Making sense of the front-end, for PHP developers (20)
![From Curiosity to ROI — Cost-Benefit Analysis of Agentic Automation [3/6]](https://cdn.slidesharecdn.com/ss_thumbnails/session-3-250903141006-a3917e1a-thumbnail.jpg?width=560&fit=bounds)
Making sense of the front-end, for PHP developers
- 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
- 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') }}