Empowering Vue with Typescript, Tnversify, Vuex and some other super tools

Did you worked with TypeScript? Are you working with Vue? Let's move to the next level. On this talk you will learn how to create real and scalable applications using the best of TypeScript and Vue, with super tools like Nuxt, Inversify, Vuex, etc. Keep updating your team and learn more technologies that can help to improve your product, your team and your projects. Also discuss about if you need all of this and you're not using only because is cool.

Transcript

1. EMPOWERING VUE WITH TYPESCRIPT, INVERSIFY, VUEX AND SOME OTHER SUPER TOOLS Quique Fdez Guerra Software Engineer PlainConcepts @CKGrafico
3. helpdev.org
4. SOFTWARE IN THE PAST WAS… The client asked for a transport and we built a car
5. BUT TODAY IS BETTER & COMPLEX The client ask for a transport and we build a transport
6. AND IS ONE OF THE REASONS WHY Our projects need to scale
7. Our projects need to scale, and scale… AND IS ONE OF THE REASONS WHY Our projects need to scale
8. Our projects need to scale, and scale… AND IS ONE OF THE REASONS WHY yes, and scale. Our projects need to scale
9. Wide websites, “horitzontally” escalated projects TWO + KIND OF WEBS APPEARED
10. Meshed websites, Scaling like a “mesh topology” TWO + KIND OF WEBS APPEARED
11. DON’T WORRY, WE HAVE TOOLS… And a loooot of good practices
12. SOME ARE VERSATILE Vue, the progressive framework
13. SOME ARE VERSATILE Vue, the progressive framework
14. OR INCREDIBLY EASY Vuex, centralized state management
15. OR INCREDIBLY EASY Vuex, centralized state management
16. TypeScript, JavaScript that scales OTHER COME WITH SUPERPOWERS
17. TypeScript, JavaScript that scales OTHER COME WITH SUPERPOWERS
18. SOME SEEM MAGIC Inversify, helps to decrease coupling
19. SOME SEEM MAGIC Inversify, helps to decrease coupling
20. AND TAKE YOU TO THE NUXT LEVEL Nuxt, Universal Vue applications
21. AND TAKE YOU TO THE NUXT LEVEL Nuxt, Universal Vue applications
22. Like separation of responsibilities BUT DON’T FORGET GOOD PRACTICES
23. In a huge percentage of our components BUT DON’T FORGET GOOD PRACTICES
24. DECORATORS Wrapping code
25. INVERSION OF CONTROL To help modularity and testability Decreases coupling Better tests Code re-usability Redable code
26. AND THANKS TO PATTERNS LIKE… Strategy pattern Strategy
27. WE LEARNED SOME TIPS Make small components. Sometimes splitted components, are ok. Use linting always. Use conventions for names. Please, do tests. Ask for feedback and accept it. Be ready to change everything. Your ideas are also good. Be continuously improving your code.
28. WHERE TO START? Opensource boilerplates with good practices (use them apart of CLIs)
29. Software in the past was… but today is better and complex and is one of the reasons why our projects need to scale. THERE IS A RECAP HIDDEN IN THE TITLES ! But don’t forget good practices like separation of responsibilities, decorators, inversion of control and patterns. Two more kind of websites have appeared but don’t worry we have tools, some are versatile or incredibly easy, other come with superpowers, some seem magic and take you to the next level. Quique Fdez Guerra
30. EMPOWERING VUE WITH TYPESCRIPT, INVERSIFY, VUEX AND SOME OTHER SUPER TOOLS Quique Fdez Guerra Software Dev Engineer PlainConcepts @CKGrafico QUESTIONS? @CKGRAFICO