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.
3. EVERY SOLUTION COMES FROM A PROBLEM
OUR FRONTEND FRAMEWORK CHOICE
ASSETS MANAGEMENT
INTEGRATION WITH SYMFONY
BASIC EXAMPLE
FINAL CONSIDERATIONS
4.
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
9.
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
11.
12.
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
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
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:
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
