Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Hugo Nogueira

October 10, 2018

Other Decks in Programming


  1. WHO AM I? Engineering lead @ BCG Digital Ventures. Passionate

    about front-end development, mainly with React + Redux in with Berlin for 2 years
  2. 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
  3. Asynchronous Module Definition (AMD) Born as CommonJS wasn’t suited for

    the browsers early on. As the name implies, it supports asynchronous loading.
  4. 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.
  5. ES2015 Modules Implemented in the the latest ECMAScript 2015, and

    is compatible with both synchronous and asynchronous approaches.
  6. ES2015 Modules Isn’t fully implemented in the browsers and it

    requires a transpiler like Babel to render in the unsupported browsers.
  7. Webpack was created mainly as a bundler for web apps,

    to solve issues like code-splitting and assets managament.
  8. Even thought both libraries have grown crazily recently, the conventional

    wisdom has been: “Use webpack for apps, and Rollup for libraries”