SlideShare a Scribd company logo
Rollup.jsRollup.js
/me/me
Mathieu BretonMathieu Breton
CTO at @jsrepublic
What ?What ?
A some kind of JS packagerA some kind of JS packager
coming from the Future ...coming from the Future ...
By Bogdan Chadkin
and Oskar Segersvärd
State of artState of art
 
All packagers bundle entirely the code base, and
does not remove the dead code
FeaturesFeatures
Package Node lib and
JavaScript Front asset
 
Output types : UMD, AMD,
CommonJS, ES2015, Global
 
Produce smaller bundle
than anyone
JS API, Tools integration,
Command line interface
 
Design to work with the
next standard
 
Handle Cyclic
dependency
LimitationsLimitations
Handle only JavaScript assets
 
Works with ES2015 and CommonJS only
 
Needs a ES2015 transpiler (Ex: Babel)
How ?How ?
Based on ES2015 and its modules
// api.js
export function getJson(url) { ... }
// main.js
import {getJson} from "./api";
Remove Dead code with Tree-Shaking
RollupJs
Is it efficient ?Is it efficient ?
Yes! Minified and gzipped, D3 weighs around
58kB  weighs just 8kB,
including the code itself. Depending on which of
d3's functions you're actually using, the savings can
be even more dramatic.
 
Voronoi Tesselation example
Source
For commonJSFor commonJS
NPM : rollup­plugin­commonjs
// importer.js
import { named } from './exporter.js';
// exporter.js
module.exports = { named: 42 };
// importer.js
const named = require("./exporter").named;
// exporter.js
module.exports = { named: 42 };
But prefer ES2015 modulesBut prefer ES2015 modules
{
"name": "my-package",
"version": "0.1.0",
"main": "dist/my-package.umd.js",
"jsnext:main": "dist/my-package.es2015.js"
}
jsnext:mainjsnext:main
In practiceIn practice
github.com/js-republic/rollup-sample
ConclusionConclusion
Not yet production ready ...
Bugs
Npm ecosystem needs to evolve
Handle only ES2015 modules et CommonJS
It is the future
Thank youThank you
@MatBreton@MatBreton
Rollupjs.org

More Related Content

Similar to Rollup.js

Modular JavaScript in an OSGi World - S Mak
Modular JavaScript in an OSGi World - S MakModular JavaScript in an OSGi World - S Mak
Modular JavaScript in an OSGi World - S Mak
mfrancis
 
Brad Enterprise Solution Architect
Brad Enterprise Solution ArchitectBrad Enterprise Solution Architect
Brad Enterprise Solution Architect
Brad Travis
 
The Java alternative to Javascript
The Java alternative to JavascriptThe Java alternative to Javascript
The Java alternative to Javascript
Manuel Carrasco Moñino
 
Modules and EmbedJS
Modules and EmbedJSModules and EmbedJS
Modules and EmbedJS
Jens Arps
 
Browser and Cloud - The Future of IDEs?
Browser and Cloud - The Future of IDEs?Browser and Cloud - The Future of IDEs?
Browser and Cloud - The Future of IDEs?
martinlippert
 
Modular JavaScript
Modular JavaScriptModular JavaScript
Modular JavaScript
NLJUG
 
Google Dev Day2007
Google Dev Day2007Google Dev Day2007
Google Dev Day2007
lucclaes
 
React native bridge for iOS and android
 React native bridge for iOS and android React native bridge for iOS and android
React native bridge for iOS and android
Katy Slemon
 
Jalimo Slides Linuxtag2007 (English)
Jalimo Slides Linuxtag2007 (English)Jalimo Slides Linuxtag2007 (English)
Jalimo Slides Linuxtag2007 (English)
smancke
 
GWT - AppDays - (25 aprile 2014, pordenone)
GWT - AppDays - (25 aprile 2014, pordenone)GWT - AppDays - (25 aprile 2014, pordenone)
GWT - AppDays - (25 aprile 2014, pordenone)
firenze-gtug
 
Pragmatic Model Driven Development using openArchitectureWare
Pragmatic Model Driven Development using openArchitectureWarePragmatic Model Driven Development using openArchitectureWare
Pragmatic Model Driven Development using openArchitectureWare
Michael Vorburger
 
Web polyglot programming
Web polyglot programmingWeb polyglot programming
Web polyglot programming
Dmitry Buzdin
 
Javascript as a target language - GWT KickOff - Part 2/2
Javascript as a target language - GWT KickOff - Part 2/2Javascript as a target language - GWT KickOff - Part 2/2
Javascript as a target language - GWT KickOff - Part 2/2
JooinK
 
IOC + Javascript
IOC + JavascriptIOC + Javascript
IOC + Javascript
Brian Cavalier
 
Intro to OSGi
Intro to OSGiIntro to OSGi
Intro to OSGi
Tricode (part of Dept)
 
Advanced Node.JS Meetup
Advanced Node.JS MeetupAdvanced Node.JS Meetup
Advanced Node.JS Meetup
LINAGORA
 
Angular 2: What's New?
Angular 2: What's New?Angular 2: What's New?
Angular 2: What's New?
jbandi
 
Introduction to EclipseRT (JAX 2010)
Introduction to EclipseRT (JAX 2010)Introduction to EclipseRT (JAX 2010)
Introduction to EclipseRT (JAX 2010)
Chris Aniszczyk
 
Basic Concept of Node.js & NPM
Basic Concept of Node.js & NPMBasic Concept of Node.js & NPM
Basic Concept of Node.js & NPM
Bhargav Anadkat
 
Challenges of angular in production (Tasos Bekos) - GreeceJS #17
Challenges of angular in production (Tasos Bekos) - GreeceJS #17Challenges of angular in production (Tasos Bekos) - GreeceJS #17
Challenges of angular in production (Tasos Bekos) - GreeceJS #17
GreeceJS
 

Similar to Rollup.js (20)

Modular JavaScript in an OSGi World - S Mak
Modular JavaScript in an OSGi World - S MakModular JavaScript in an OSGi World - S Mak
Modular JavaScript in an OSGi World - S Mak
 
Brad Enterprise Solution Architect
Brad Enterprise Solution ArchitectBrad Enterprise Solution Architect
Brad Enterprise Solution Architect
 
The Java alternative to Javascript
The Java alternative to JavascriptThe Java alternative to Javascript
The Java alternative to Javascript
 
Modules and EmbedJS
Modules and EmbedJSModules and EmbedJS
Modules and EmbedJS
 
Browser and Cloud - The Future of IDEs?
Browser and Cloud - The Future of IDEs?Browser and Cloud - The Future of IDEs?
Browser and Cloud - The Future of IDEs?
 
Modular JavaScript
Modular JavaScriptModular JavaScript
Modular JavaScript
 
Google Dev Day2007
Google Dev Day2007Google Dev Day2007
Google Dev Day2007
 
React native bridge for iOS and android
 React native bridge for iOS and android React native bridge for iOS and android
React native bridge for iOS and android
 
Jalimo Slides Linuxtag2007 (English)
Jalimo Slides Linuxtag2007 (English)Jalimo Slides Linuxtag2007 (English)
Jalimo Slides Linuxtag2007 (English)
 
GWT - AppDays - (25 aprile 2014, pordenone)
GWT - AppDays - (25 aprile 2014, pordenone)GWT - AppDays - (25 aprile 2014, pordenone)
GWT - AppDays - (25 aprile 2014, pordenone)
 
Pragmatic Model Driven Development using openArchitectureWare
Pragmatic Model Driven Development using openArchitectureWarePragmatic Model Driven Development using openArchitectureWare
Pragmatic Model Driven Development using openArchitectureWare
 
Web polyglot programming
Web polyglot programmingWeb polyglot programming
Web polyglot programming
 
Javascript as a target language - GWT KickOff - Part 2/2
Javascript as a target language - GWT KickOff - Part 2/2Javascript as a target language - GWT KickOff - Part 2/2
Javascript as a target language - GWT KickOff - Part 2/2
 
IOC + Javascript
IOC + JavascriptIOC + Javascript
IOC + Javascript
 
Intro to OSGi
Intro to OSGiIntro to OSGi
Intro to OSGi
 
Advanced Node.JS Meetup
Advanced Node.JS MeetupAdvanced Node.JS Meetup
Advanced Node.JS Meetup
 
Angular 2: What's New?
Angular 2: What's New?Angular 2: What's New?
Angular 2: What's New?
 
Introduction to EclipseRT (JAX 2010)
Introduction to EclipseRT (JAX 2010)Introduction to EclipseRT (JAX 2010)
Introduction to EclipseRT (JAX 2010)
 
Basic Concept of Node.js & NPM
Basic Concept of Node.js & NPMBasic Concept of Node.js & NPM
Basic Concept of Node.js & NPM
 
Challenges of angular in production (Tasos Bekos) - GreeceJS #17
Challenges of angular in production (Tasos Bekos) - GreeceJS #17Challenges of angular in production (Tasos Bekos) - GreeceJS #17
Challenges of angular in production (Tasos Bekos) - GreeceJS #17
 

More from Mathieu Breton

TDD in Javascript
TDD in JavascriptTDD in Javascript
TDD in Javascript
Mathieu Breton
 
Meet VueJs
Meet VueJsMeet VueJs
Meet VueJs
Mathieu Breton
 
FalcorJS
FalcorJSFalcorJS
FalcorJS
Mathieu Breton
 
BDD in Javascript
BDD in JavascriptBDD in Javascript
BDD in Javascript
Mathieu Breton
 
NodeJS Spring style Inversifyjs
NodeJS Spring style InversifyjsNodeJS Spring style Inversifyjs
NodeJS Spring style Inversifyjs
Mathieu Breton
 
Clean code in JavaScript
Clean code in JavaScriptClean code in JavaScript
Clean code in JavaScript
Mathieu Breton
 
Présentation de Dart
Présentation de DartPrésentation de Dart
Présentation de Dart
Mathieu Breton
 
JavaScript the-next-big...bytecode
JavaScript the-next-big...bytecodeJavaScript the-next-big...bytecode
JavaScript the-next-big...bytecode
Mathieu Breton
 

More from Mathieu Breton (8)

TDD in Javascript
TDD in JavascriptTDD in Javascript
TDD in Javascript
 
Meet VueJs
Meet VueJsMeet VueJs
Meet VueJs
 
FalcorJS
FalcorJSFalcorJS
FalcorJS
 
BDD in Javascript
BDD in JavascriptBDD in Javascript
BDD in Javascript
 
NodeJS Spring style Inversifyjs
NodeJS Spring style InversifyjsNodeJS Spring style Inversifyjs
NodeJS Spring style Inversifyjs
 
Clean code in JavaScript
Clean code in JavaScriptClean code in JavaScript
Clean code in JavaScript
 
Présentation de Dart
Présentation de DartPrésentation de Dart
Présentation de Dart
 
JavaScript the-next-big...bytecode
JavaScript the-next-big...bytecodeJavaScript the-next-big...bytecode
JavaScript the-next-big...bytecode
 

Recently uploaded

A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
sonjaschweigert1
 
Data structures and Algorithms in Python.pdf
Data structures and Algorithms in Python.pdfData structures and Algorithms in Python.pdf
Data structures and Algorithms in Python.pdf
TIPNGVN2
 
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AIEnchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Vladimir Iglovikov, Ph.D.
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
Kumud Singh
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Matthew Sinclair
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
Adtran
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
Claudio Di Ciccio
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
Zilliz
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Aggregage
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...
Zilliz
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Albert Hoitingh
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
Neo4j
 
Large Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial ApplicationsLarge Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial Applications
Rohit Gautam
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 

Recently uploaded (20)

A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
 
Data structures and Algorithms in Python.pdf
Data structures and Algorithms in Python.pdfData structures and Algorithms in Python.pdf
Data structures and Algorithms in Python.pdf
 
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AIEnchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
 
Large Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial ApplicationsLarge Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial Applications
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 

Rollup.js