Speed and Modularity with
JS micro-libraries
by Ciro Nunes @AvenueCode
This talk is about *Mobile Web Apps* performance
## Performance == UX
> a 1-second page slowdown could cost Amazon $1.6 billion in sales each year.
[opensignal.com/reports/state-of-lte/usa-q1-2014/](http://opensignal.com/reports/state-of-lte/usa-q1-2014/)
## Agenda
- Why micro-libs?
- Pros and Cons of using micro-libs
- Where to find great micro-libs?
- Loading strategies
> “A library is essentially a set of functions that you can call”
- [Martin Fowler](http://martinfowler.com/bliki/InversionOfControl.html)
84kb
88kb
272kb
32kb
104kb
Why do we use JS libraries?
- Manipulate DOM
- Data-binding
- Animations
- Event handling
- Ajax
- Promises
- HTML Templates
- Utilities
- Cross-browser compatibility
But we don't always need the whole thing!
Micro-libraries
- are small (4kb ~ 15kb)
- are specific purpose focused
- are loose coupled
- are modular
- are easy to understand
- I said that they're small?!
> “Microlibraries are small sets of specific purpose functions that you can call”
- [Ciro Nunes](http://twitter.com/cironunes/)
## Where to find great micro-libs?
[microjs.com](http://microjs.com/)
[moutjs.com](http://moutjs.com/)
### Protip: custom build
[](https://github.com/jquery/jquery#how-to-build-your-own-jquery)
### Protip: custom build
[](http://lodash.com/custom-builds)
Micro-libs: The Cons
Using micro-libs we usally lose:
- Big cross-browser support
- Heavy unit tested code
- Centralized docs and bug tracking
You may need to reinvent the wheel sometimes
As our application grows we'll probably end with a bunch of micro-libs that
combined would be the same of a large library.
## Loading strategies
> Our goal is show content for the user as soon as possible
## Eager loading
load everything at the first time
## Lazy loading
load just what you need and then request for the rest
## Loading on demand
load when the user ask for the functionality
## Over-eager loading
try to antecipate what the user will need and load
## Tools
Should I drop that large library in favor of micro-libs?
## Some things to consider
- Do you need a large cross-browser support?
- Is your deadline too short?
- Are you afraid to leave your comfort zone?
If not you're good to go!
## Learn more
- [Pros and Cons of JavaScript Micro-Frameworks](addyosmani.com/blog/prosconsmicroframeworks/)
- [RequireJS Website](requirejs.org)
- [How to Build your own jQuery](https://github.com/jquery/jquery#how-to-build-your-own-jquery)