Speed and Modularity with – JS micro-libraries – Micro-libraries
Speed and Modularity with – JS micro-libraries – Micro-libraries
0 0
js-microlibs-talk
http://cironunes.github.io/js-microlibs-talkOn Github cironunes / js-microlibs-talk
Speed and Modularity with
JS micro-libraries
by Ciro Nunes @AvenueCode
This talk is about *Mobile Web Apps* performance
This presentation is about Mobile Web Apps performance. We know that the most important feature
of all application is the performance. We can have the best design and the most cool features, but
if it's slow, nobody will use it!
## 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)