Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to develop reusable components with Babel and Rollup.js

42 views

Published on

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.

Published in: Software
  • Be the first to comment

  • Be the first to like this

How to develop reusable components with Babel and Rollup.js

  1. 1. HOW TODEVELOP REUSABLECOMPONENTSWITH rollup.jsAND HUGO NOGUEIRA Engineering Lead @ BCG Digital Ventures hello@hugomagalhaes.com hugomn
  2. 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. 3. WHY WOULD I NEED TO EXPOSE MY COMPONENTS?
  4. 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. 5. HOW DO WE MANAGE ENCAPSULATION AND DEPENDENCY?
  6. 6. THE REVEALING MODULE PATTERN
  7. 7. CommonJS Started by Mozilla engineer Kevin Dangoor in January 2009 and initially named ServerJS
  8. 8. CommonJS Made obsolete in May 2013 and is avoided by the core Node.js developers.
  9. 9. CommonJS Started the concepts of require, exports and module.
  10. 10. CommonJS
  11. 11. Asynchronous Module Definition (AMD) Born as CommonJS wasn’t suited for the browsers early on. As the name implies, it supports asynchronous loading.
  12. 12. 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.
  13. 13. ES2015 Modules Native javascript. 🤩
  14. 14. ES2015 Modules Implemented in the the latest ECMAScript 2015, and is compatible with both synchronous and asynchronous approaches.
  15. 15. ES2015 Modules Isn’t fully implemented in the browsers and it requires a transpiler like Babel to render in the unsupported browsers.
  16. 16. ES2015 Modules
  17. 17. rollup.js is a module bundler for modern JavaScript libraries
  18. 18. WHY NOT ?
  19. 19. Webpack was created mainly as a bundler for web apps, to solve issues like code-splitting and assets managament.
  20. 20.  Even thought both libraries have grown crazily recently, the conventional wisdom has been: “Use webpack for apps, and Rollup for libraries”
  21. 21. Talk is cheap…
  22. 22. Let’s first install rollup globally
  23. 23. Let’s create a component 
 to be reused
  24. 24. Now we create our main.js file as our entry point
  25. 25. Time to install and create our config file for babel
  26. 26. Time to install and create our config file for babel
  27. 27. Now we install rollup babel plugin and create rollup configuration
  28. 28. Now we install rollup babel plugin and create rollup configuration
  29. 29. NOW WE CAN ALREADY BUILD OUR COMPONENT!
  30. 30. NOW WE CAN PUBLISH OUR COMPONENT TO NPM
  31. 31. THAT’S IT! NOW LET’S CREATE A TEST APP TOGETHER
  32. 32. Creating our test app with create-react-app
  33. 33. BONUS TIP! Let’s setup our environment to use our local library
  34. 34. Using npm link to setup our dev environment
  35. 35. HUGO NOGUEIRA Engineering Lead @ BCG Digital Ventures hello@hugomagalhaes.com hugomn THANKS! https://careers.bcgdv.com WE ARE HIRING!

×