Download to read offline
More Related Content
![Aeternity Blockchain - Ecosystem & Devtools [2019]](https://cdn.slidesharecdn.com/ss_thumbnails/aeternityprezentacjasilesian03-190320155135-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Making sense of the front-end, for PHP developers
Making sense of the front-end, for PHP developers
- 1. Making sense of thefront-end for PHP developers
- 2. About me web developerconsultant PHP + JavaScript @LuizBrandaoJr
- 4. Topics ● Front-end ingeneral ● Tools of the trade ● Key technologies ● Development workflow ● Integration with PHP
- 5. Why is front-endhard? ● Browsers! ● Cross-browser issues ● Different technologies ● Complex applications ● User experience ● Non-developers
- 6. The holy trinity ●HTML : structure ● CSS : presentation ● JavaScript : behavior
- 7.
- 8. ● Semantics ● Connectivity ●Offline and storage ● Multimedia ● 2D/3D graphics and effects ● Performance and integration ● Device access ● Styling
- 9. JavaScript it’s everywhere ● Clientside scripting language ● Also runs on the server ● Impossible to keep up with
- 10. ECMAScript the standard ES issimply short for ECMAScript ● ES2015 ● ES6 ● They are the same! ● ES2016 (ES7) ● ES2017 (ES8) ● ES.Next European Computer Manufacturers Association
- 12. Babel ES.Next, today ● JavaScriptcompiler ● Transform syntax ● Polyfills ● Plugins / Presets
- 14. TypeScript because we allwant 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 withJS ● Kinda like Babel for CSS ● Use modern CSS ● Lots of plugins: ○ auto-prefixing ○ dead css removal
- 20. Frameworks I’m down forit ● Pure JavaScript frameworks ● UI / CSS frameworks
- 21. UI / CSS Frameworks nowmake it pretty Provide collection of components ready to use: ● Bootstrap ● Semantic-UI ● Foundation ● Bulma ● Vuetify
- 22. JavaScript Frameworks somebody help me Mostpopular: ● React ● Vue.js ● Angular Why: ● Help create interactive UIs ● Organize the application
- 24. What about jQuery? it wasfun 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 allthe shiny things together ● Task Runners ● Bundle/Module Managers
- 29. Task Runners it’s timeto automate ● Grunt ● Gulp
- 30. Bundle Managers are we thereyet? ● Webpack ● Parcel ● Rollup ● Browserify
- 33. Webpack the almighty Most popularstatic module bundler Core concepts: ● Entry ● Output ● Loaders ● Plugins ● Mode ● Browser compatibility
- 34. Most popular staticmodule 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 someof that ● Same concept as Laravel Mix ● Integrates with Symfony composer require webpack-encore-bundle
- 42. Asset Versioning burst thatcache 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.