Presented at: Open Source 101 - Columbia 2019 Presented by: Taylor Kimmett, Cognito Forms April 18th, 2019 Columbia, SC, USA

1. Expectations vs Reality
When Implementing Vue.js
Taylor Kimmett
Software developer at Cognito Forms

3. Powerful,
beautiful
forms

6. Addressing
Technical Debt

7. Aging client technology
▪ jQuery – 12 years old
▪ MSAjax – 10 years old
▪ ExoWeb
▪ open source library we built

8. Maintenance
▪ Loosely connected scripts
▪ JS + HTML in C#

12. Packaging

13. Limited community
▪ Third party software
▪ Documentation, learning resources

14. Size
▪ jQuery: 91KB
▪ MsAjax: 121KB
▪ Vue + compiler: 92KB
212KB
jQuery + MsAjax
92KB
Vue + compiler

15. The Promise of Vue

16. From the docs
Vue is a progressive framework for building user interfaces. Unlike other monolithic
frameworks, Vue is designed from the ground up to be incrementally adoptable. The
core library is focused on the view layer only, and is easy to pick up and integrate with
other libraries or existing projects. On the other hand, Vue is also perfectly capable of
powering sophisticated Single-Page Applications when used in combination with
modern tooling and supporting libraries.

17. Incremental inclusion

18. Components

19. Single File
Components
▪ Organization
▪ Clarity
▪ Separation of Concerns?

20. The Realities of Refactor

21. Where to start?
▪ Two sides of Cognito
▪ More complex first
Admin Public Form

22. The build step
▪ A necessary evil?
▪ Webpack
▪ Modules
▪ Configuration galore
▪ A force for good

23. Mapping components

24. Translating MSAjax

25. Integrating ExoWeb

26. Simplify code generation

28. Improve cashing

29. Improve caching

30. Optimize requests
▪ Code generation approach
▪ Vue + Webpack approach

32. Testing
▪ An unexpected gift
▪ Current testing strategy
▪ Jest
▪ Easy, fast, fun

33. Development
community
▪ vuejs.org/
▪ github.com/chrisvfritz/vue-
enterprise-boilerplate
▪ element.eleme.io

34. [WIP]

36. The future

38. The future
▪ Beta
▪ Compatibility
▪ Admin
▪ Optimistic

39. Thank you
cognitoforms.com/vue