How to develop reusable components with Babel and Rollup.js

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.

86d69b8300d46636769c0bf2c133796d?s=128

Hugo Nogueira

October 10, 2018
Tweet

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?

  6. None
  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

  18. None
  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!