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.

1. MILANO
20 ottobre 2017

2. @mar_gab
GabMar
gabrielemartini1990@gmail.com

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

15. ASSETS MANAGEMENT

16. WEBPACKSASS
(SCSS)
ESLINTYARN

17. GIVES THE SUPERPOWERS TO CSS

18. VARIABLES

19. NESTED RULES

20. @IMPORT
(DIFFERENT FROM CSS @IMPORT)

21. OTHER SUPERPOWERS:
MIXINS
OPERATORS
INHERITANCE
AND MANY MORE...

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

26. WEBPACKVUE.JS SYMFONY

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

36. https://gitlab.com/gabmar/encore_demo

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