How to develop reusable components with Babel and Rollup.js

We quite often develop nice features and tools for ourselves. Learning how to make it reusable and how to publish to the community is a must.

Transcript

1. HOW TO DEVELOP REUSABLE COMPONENTS WITH rollup.js AND HUGO NOGUEIRA Engineering Lead @ BCG Digital Ventures hello@hugomagalhaes.com hugomn
2. WHO AM I? Engineering lead @ BCG Digital Ventures. Passionate about front-end development, mainly with React + Redux in with Berlin for 2 years
3. WHY WOULD I NEED TO EXPOSE MY COMPONENTS?
4. Use your component as a micro-service front-end application To share configuration (constants, settings) as components between different applications To be able to reuse your components between different applications
5. HOW DO WE MANAGE ENCAPSULATION AND DEPENDENCY?
7. THE REVEALING MODULE PATTERN
8. CommonJS Started by Mozilla engineer Kevin Dangoor in January 2009 and initially named ServerJS
9. CommonJS Made obsolete in May 2013 and is avoided by the core Node.js developers.
10. CommonJS Started the concepts of require, exports and module.
11. CommonJS
12. Asynchronous Module Definition (AMD) Born as CommonJS wasn’t suited for the browsers early on. As the name implies, it supports asynchronous loading.
13. Asynchronous Module Definition (AMD) The function is called only when the requested modules are finished loading. The define function takes the first argument as an array of dependency modules. These modules are loaded in a non-blocking manner in the background and once the loading is completed, the callback function is executed.
14. ES2015 Modules Native javascript.
15. ES2015 Modules Implemented in the the latest ECMAScript 2015, and is compatible with both synchronous and asynchronous approaches.
16. ES2015 Modules Isn’t fully implemented in the browsers and it requires a transpiler like Babel to render in the unsupported browsers.
17. ES2015 Modules
19. rollup.js is a module bundler for modern JavaScript libraries
20. WHY NOT ?
21. Webpack was created mainly as a bundler for web apps, to solve issues like code-splitting and assets managament.
22. Even thought both libraries have grown crazily recently, the conventional wisdom has been: “Use webpack for apps, and Rollup for libraries”
23. Talk is cheap…
24. Let’s first install rollup globally
25. Let’s create a component 
 to be reused
26. Now we create our main.js file as our entry point
27. Time to install and create our config file for babel
28. Time to install and create our config file for babel
29. Now we install rollup babel plugin and create rollup configuration
30. Now we install rollup babel plugin and create rollup configuration
31. NOW WE CAN ALREADY BUILD OUR COMPONENT!
32. NOW WE CAN PUBLISH OUR COMPONENT TO NPM
33. THAT’S IT! NOW LET’S CREATE A TEST APP TOGETHER
34. Creating our test app with create-react-app
35. BONUS TIP! Let’s setup our environment to use our local library
36. Using npm link to setup our dev environment
37. HUGO NOGUEIRA Engineering Lead @ BCG Digital Ventures hello@hugomagalhaes.com hugomn THANKS! https://careers.bcgdv.com WE ARE HIRING!