Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
MILANO
20 ottobre 2017
@mar_gab
GabMar
gabrielemartini1990@gmail.com
EVERY SOLUTION COMES FROM A PROBLEM
OUR FRONTEND FRAMEWORK CHOICE
ASSETS MANAGEMENT
INTEGRATION WITH SYMFONY
BASIC EXAMPLE...
A DEVELOPER OF YOUR TEAM CREATES
A NEW FRONTEND FRAMEWORK
A DEVELOPER OF YOUR TEAM CREATES
A NEW FRONTEND FRAMEWORK
YOU USE THIS NEW FRAMEWORK
IN YOUR APPLICATION
A DEVELOPER OF YOUR TEAM CREATES
A NEW FRONTEND FRAMEWORK
YOU USE THIS NEW FRAMEWORK
IN YOUR APPLICATION
THE DEVELOPER WHO...
“
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...
DO ALL THE THINGS THAT THE OLD ONE DOES
EASY TO LEARN
EASY TO USE
BE STABLE
BE SUPPORTED
EASY TO INTEGRATE WITH SYMFONY
DOES ALL THE THINGS THAT THE OLD ONE DOES
EASY TO LEARN
EASY TO USE
STABLE
SUPPORTED
EASY TO INTEGRATE WITH SYMFONY
= VIRTUAL DOM
= COMPONENTS
= FOCUS ON CORE
+ HTML & CSS
+ SCOPED CSS
± TYPESCRIPT
+ FLEXIBLE
+ SMALLER
= SIMILAR EXPRESSIO...
ASSETS MANAGEMENT
WEBPACKSASS
(SCSS)
ESLINTYARN
GIVES THE SUPERPOWERS TO CSS
VARIABLES
NESTED RULES
@IMPORT
(DIFFERENT FROM CSS @IMPORT)
OTHER SUPERPOWERS:
MIXINS
OPERATORS
INHERITANCE
AND MANY MORE...
BUILD A DEPENDENCY GRAPH
OF ALL YOUR ASSETS
WEBPACK CONFIGURATION CONSISTS
OF 4 COMPONENTS (BASICALLY):
ENTRY: THE STARTING POINT OF THE GRAPH
OUTPUT: WHERE TO PUT TH...
INTEGRATION WITH SASS AND ESLINT USING LOADERS
sass-loader eslint-loader
WEBPACKVUE.JS SYMFONY
“Laravel Mix provides a clean, fluent API for defining basic webpack build steps
for your Laravel application. Mix support...
FOLLOWING LARAVEL MIX IDEA,
SYMFONY DEVELOPERS CREATED
WEBPACK ENCORE
INSPIRED BY LARAVEL MIX AND WEBPACKER
WEBPACK-STYLE CONFIGURATIONS
EASY TO LEARN
EASY TO USE
EXTENDABLE
INTEGRATION WITH M...
JUST FEW LINES FOR YOUR FIRST PROJECT
SIMPLE INSTALLATION WITH YARN
COMPILE ALL THE ASSETS
IMPORT THE BUNDLES
MULTIPAGE APPLICATION? JUST ADD AN ENTRY
DO YOU WANT TO USE TYPESCRIPT?
INTEGRATION WITH VUE.JS
OUR .vue FILES ARE READY TO BE COMPILED
https://gitlab.com/gabmar/encore_demo
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
IS IMPORTANT TO HAVE A STRONG FRONTEND STRUCTURE FOR
SCALABILITY
USING TECHNOLOGIES AS SASS HELP YOU TO SAVE A LOT OF TIME...
THANK YOU FOR YOUR ATTENTION
Symfony and frontend: a better way
Symfony and frontend: a better way
Symfony and frontend: a better way
Symfony and frontend: a better way
Symfony and frontend: a better way
Symfony and frontend: a better way
Symfony and frontend: a better way
Upcoming SlideShare
Loading in …5
×

Symfony and frontend: a better way

2,080 views

Published on

Mentre negli ultimi anni tool e best practices per lo sviluppo frontend hanno subito un profondo cambiamento, l’evoluzione degli strumenti frontend legati a Symfony non ha seguito lo stesso ritmo. In questo talk vedremo come è possibile "svecchiare" la nostra tool-chain e ottenere un ambiente di sviluppo moderno ed efficace. In particolare ci concentreremo nell'integrazione tra Symfony e Vue.js, astro nascente dei framework Javascript, in accoppiata con webpack. Esploreremo inoltre Encore, la nuovissima libreria ufficiale con cui il team core di Symfony sta tentando di riavvicinare i due mondi dello sviluppo web.

Published in: Software
  • Be the first to comment

Symfony and frontend: a better way

  1. 1. MILANO 20 ottobre 2017
  2. 2. @mar_gab GabMar gabrielemartini1990@gmail.com
  3. 3. EVERY SOLUTION COMES FROM A PROBLEM OUR FRONTEND FRAMEWORK CHOICE ASSETS MANAGEMENT INTEGRATION WITH SYMFONY BASIC EXAMPLE FINAL CONSIDERATIONS
  4. 4. A DEVELOPER OF YOUR TEAM CREATES A NEW FRONTEND FRAMEWORK
  5. 5. A DEVELOPER OF YOUR TEAM CREATES A NEW FRONTEND FRAMEWORK YOU USE THIS NEW FRAMEWORK IN YOUR APPLICATION
  6. 6. 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
  7. 7. “ 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
  8. 8. DO ALL THE THINGS THAT THE OLD ONE DOES EASY TO LEARN EASY TO USE BE STABLE BE SUPPORTED EASY TO INTEGRATE WITH SYMFONY
  9. 9. DOES ALL THE THINGS THAT THE OLD ONE DOES EASY TO LEARN EASY TO USE STABLE SUPPORTED EASY TO INTEGRATE WITH SYMFONY
  10. 10. = 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
  11. 11. ASSETS MANAGEMENT
  12. 12. WEBPACKSASS (SCSS) ESLINTYARN
  13. 13. GIVES THE SUPERPOWERS TO CSS
  14. 14. VARIABLES
  15. 15. NESTED RULES
  16. 16. @IMPORT (DIFFERENT FROM CSS @IMPORT)
  17. 17. OTHER SUPERPOWERS: MIXINS OPERATORS INHERITANCE AND MANY MORE...
  18. 18. BUILD A DEPENDENCY GRAPH OF ALL YOUR ASSETS
  19. 19. 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
  20. 20. INTEGRATION WITH SASS AND ESLINT USING LOADERS sass-loader eslint-loader
  21. 21. WEBPACKVUE.JS SYMFONY
  22. 22. “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:
  23. 23. FOLLOWING LARAVEL MIX IDEA, SYMFONY DEVELOPERS CREATED WEBPACK ENCORE
  24. 24. INSPIRED BY LARAVEL MIX AND WEBPACKER WEBPACK-STYLE CONFIGURATIONS EASY TO LEARN EASY TO USE EXTENDABLE INTEGRATION WITH MAJOR FRONTEND FRAMEWORKS
  25. 25. JUST FEW LINES FOR YOUR FIRST PROJECT SIMPLE INSTALLATION WITH YARN
  26. 26. COMPILE ALL THE ASSETS IMPORT THE BUNDLES
  27. 27. MULTIPAGE APPLICATION? JUST ADD AN ENTRY DO YOU WANT TO USE TYPESCRIPT?
  28. 28. INTEGRATION WITH VUE.JS OUR .vue FILES ARE READY TO BE COMPILED
  29. 29. https://gitlab.com/gabmar/encore_demo
  30. 30. 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
  31. 31. 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
  32. 32. THANK YOU FOR YOUR ATTENTION

×