Symfony and frontend: a better way
- 3. EVERY SOLUTION COMES FROM A PROBLEM OUR FRONTEND FRAMEWORK CHOICE ASSETS MANAGEMENT INTEGRATION WITH SYMFONY BASIC EXAMPLE FINAL CONSIDERATIONS
- 5. A DEVELOPER OF YOUR TEAM CREATES A NEW FRONTEND FRAMEWORK
- 6. A DEVELOPER OF YOUR TEAM CREATES A NEW FRONTEND FRAMEWORK YOU USE THIS NEW FRAMEWORK IN YOUR APPLICATION
- 7. A DEVELOPER OF YOUR TEAM CREATES A NEW FRONTEND FRAMEWORK YOU USE THIS NEW FRAMEWORK IN YOUR APPLICATION THE DEVELOPER WHO BUILT THE FRAMEWORK LEAVES THE COMPANY
- 8. “ I learn from my mistakes. It's a very painful way to learn, but without pain, the old saying is, there's no gain. Johnny Cash
- 10. DO ALL THE THINGS THAT THE OLD ONE DOES EASY TO LEARN EASY TO USE BE STABLE BE SUPPORTED EASY TO INTEGRATE WITH SYMFONY
- 13. DOES ALL THE THINGS THAT THE OLD ONE DOES EASY TO LEARN EASY TO USE STABLE SUPPORTED EASY TO INTEGRATE WITH SYMFONY
- 14. = VIRTUAL DOM = COMPONENTS = FOCUS ON CORE + HTML & CSS + SCOPED CSS ± TYPESCRIPT + FLEXIBLE + SMALLER = SIMILAR EXPRESSIONS + FLEXIBLE + ONE-WAY DATA FLOW VUE IS FASTER AND EASIER TO LEARN REACT ANGULAR ANGULAR V1
- 17. GIVES THE SUPERPOWERS TO CSS
- 18. VARIABLES
- 19. NESTED RULES
- 20. @IMPORT (DIFFERENT FROM CSS @IMPORT)
- 22. BUILD A DEPENDENCY GRAPH OF ALL YOUR ASSETS
- 24. WEBPACK CONFIGURATION CONSISTS OF 4 COMPONENTS (BASICALLY): ENTRY: THE STARTING POINT OF THE GRAPH OUTPUT: WHERE TO PUT THE BUNDLES LOADERS: TRANSFORM ALL FILES INTO MODULES PLUGINS: EXTEND THE BASIC CORE
- 25. INTEGRATION WITH SASS AND ESLINT USING LOADERS sass-loader eslint-loader
- 29. “Laravel Mix provides a clean, fluent API for defining basic webpack build steps for your Laravel application. Mix supports several common CSS and JavaScript pre-processors. If you've ever been confused about how to get started with module bundling and asset compilation, you will love Laravel Mix!” {FROM LARAVEL MIX DOCUMENTATION} USING WEBPACK WITH LARAVEL AND VUE IS SIMPLE AS DOING:
- 30. FOLLOWING LARAVEL MIX IDEA, SYMFONY DEVELOPERS CREATED WEBPACK ENCORE
- 31. INSPIRED BY LARAVEL MIX AND WEBPACKER WEBPACK-STYLE CONFIGURATIONS EASY TO LEARN EASY TO USE EXTENDABLE INTEGRATION WITH MAJOR FRONTEND FRAMEWORKS
- 32. JUST FEW LINES FOR YOUR FIRST PROJECT SIMPLE INSTALLATION WITH YARN
- 33. COMPILE ALL THE ASSETS IMPORT THE BUNDLES
- 34. MULTIPAGE APPLICATION? JUST ADD AN ENTRY DO YOU WANT TO USE TYPESCRIPT?
- 35. INTEGRATION WITH VUE.JS OUR .vue FILES ARE READY TO BE COMPILED
- 37. WHAT’S INSIDE: Symfony 3.3.9 Laravel Homestead 4.0.5 Webpack 3.7.1 Eslint 4.9.0 Vue.js 2.5.2 Bootstrap 4.0.0-beta
- 38. IS IMPORTANT TO HAVE A STRONG FRONTEND STRUCTURE FOR SCALABILITY USING TECHNOLOGIES AS SASS HELP YOU TO SAVE A LOT OF TIME SYMFONY WEBPACK ENCORE HELPS YOU TO USE A SET OF TECHNOLOGIES THAT NORMALLY REQUIRE A LOT OF TIME TO CONFIGURE USE A POWERFUL FRONTEND FRAMEWORK AS VUE.JS (OR SOMETHING ELSE) IS NECESSARY IN MEDIUM/LARGE APPLICATIONS
- 39. THANK YOU FOR YOUR ATTENTION