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.

1. HOW TODEVELOP
REUSABLECOMPONENTSWITH
rollup.jsAND
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!