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