Progressively Adopting Your Favorite Framework

When working on a product you can’t simply stop development to rewrite your old web application using the latest tools and frameworks. This is a talk about how to progressively modernize and improve your old web application without disrupting daily product goals, while improving the overall codebase with tests and using that shiny new framework you always wanted. We will talk about Angularjs, Vuejs, webpack and unit testing with Jest.

Transcript

1. Progressively Adopting Your Favorite Framework How we’re moving from AngularJS to Vue.js João Sardinha
2. Backstory • Outdated AngularJS version • A confusing mix of AngularJS and jQuery code • Part of a monolithic architecture • Untestable code and therefore 0 tests
3. The Core Editor Interface Angular.js
4. Adopting Vue.js for the UI • Can be used by including script directly in page • Component based with reactive view layer • Easy to adopt progressively as the project grows
5. The Core Editor Interface AngularJS Sidebar Vue Components
6. Overall Goals 1. Link existing application with new components 2. Preparing the future 3. Adding Unit Testing 4. Removing AngularJS entirely
7. Talking with AngularJS • No fancy methods, just jQuery events • Main application triggers jQuery event with data • Sidebar catches the event and updates the data • Sidebar can emit events back to application
8. The Core Editor Interface AngularJS Sidebar Vue Components .trigger() .on() .on() .trigger()
9. Talking with AngularJS • On sidebar component mount jQuery(document)
 .on(‘updateData’, this.updateDataHandler) jQuery(document)
 .trigger(‘updateData’, [data]) • On main application
10. Vue Components inside Angular •You can create new Vue components inside AngularJS •Create the mounting point for the component const MountingPoint = document.createElement('div'); •Place the mounting point in the desired place target.appendChild(MountingPoint);
11. Vue Components inside Angular •Create the component const ComponentVM = new Component({ propsData: { message: 'Hello world’, }, }); •Mount to element ComponentVM.$mount(MountingPoint); •Destroy when not in use ComponentVM.$destroy();
12. Overall Goals 1. Link existing application with new components ✅ 2. Preparing the future 3. Adding Unit Testing 4. Removing AngularJS entirely
13. Preparing the future • The application becomes an independent project • Old application remains untouched • Separate old app from new app • New features will be added in the new Vue.js architecture, fully testable and modular.
14. Preparing the future src/
 assets/
 scss/
 components/
 common/
 main.js tests/
 config/
 utils/
 data/
 unit/
 • Folder structure for new features
15. Preparing the future • Add Webpack with support for Vue Single File Components (.vue files) • Migrate existing components to .vue files • Enable Live Reload and Hot Module Reloading (HMR) • Check github.com/vuejs-templates/webpack
16. Managing common dependencies • Dependencies common to both applications will be managed by the new application and exposed to the old application through window • On main.js we expose jQuery import jQuery from 'jquery'; window.jQuery = jQuery;
17. Overall Goals 1. Link existing application with new components ✅ 2. Preparing the future ✅ 3. Adding Unit Testing 4. Removing AngularJS entirely
18. Adding Unit Testing • To make sure our application is healthy, we need tests. • We’re using Jest github.com/facebook/jest by Facebook • Plays well with our Webpack configuration • Reports code coverage
19. Coverage Report
20. Mocking dependencies • Mocking dependencies is super easy • In jest.config.js add setupFiles: ['<rootDir>/tests/mocks.js',], • In mocks.js add jest.mock('@/Api', () => require('@/ApiMock'));
21. Adding Unit Testing • Any file that imports import Api from '@/Api'; import Api from '@/ApiMock'; • Will get
22. Overall Goals 1. Link existing application with new components ✅ 2. Preparing the future ✅ 3. Adding Unit Testing ✅ 4. Removing AngularJS entirely
23. Overall Goals 1. Link existing application with new components ✅ 2. Preparing the future ✅ 3. Adding Unit Testing ✅ 4. Removing AngularJS entirely
24. To wrap-up 1. Adopted Vue.js for new components 2. Prepared the tools to help developing and deploying 3. Added unit tests to make sure the project remains healthy over time
25. Thank you Any questions or feedback? @johnsardine joao.sardinha@unbabel.com