Cold Plugins
Penguins
Keep them warm and toasty
By @johnkpaul
Who?
John K. Paul
I work for Conde Nast
I ♥ JavaScript
@johnkpaul
john@johnkpaul.com
johnkpaul.com
Invention
Some start from nothing
Some start with something
jQuery plugins
write less, do more
Actually using plugins
To Each Their Own
- A lightweight start
- Widget factory
- Widget factory + RequireJS
- Namespaced pattern
- Custom events (Publish/Subscribe)
- Extend pattern
- Non Widget-factory widget
- Prototypal inheritance pattern
- Universal Module Definition pattern
- ...
on their own...
Backbone Views
- widget initialization
- event binding
1. var CenterPhotoCarouselView = Backbone.View.extend({
2. el: '.center-carousel',
3. events:{
4. 'click .left-arrow': 'moveCarouselLeft'
5. 'click .right-arrow': 'moveCarouselRight'
6. },
7. initialize: function(){
8. var photoCount = this.$el.find('li').length;
9. },
10. moveCarouselLeft: function(event){}
11. });
Backbone Views
- Organization
- Organization
- Organization
Backbone + Plugin?
1. var CenterPhotoCarouselView = Backbone.View.extend({
2. el: '.center-carousel',
3. initialize: function() {
4. this.$el.find('ul').jcarousel({
5. jcarouselNext: '.next',
6. jcarouselPrev: '.prev',
7. auto: 2,
8. vertical: false,
9. scroll: 1,
10. btnNextEvent: 'click',
11. btnPrevEvent: 'click',
12.
13.
14.
15.
16.
17. });
18. }
19. });
20. var view = new CenterPhotoCarouselView();
What's wrong?
- Duplication
Fix?
- Separate details from specific views
duplication--
1. var CarouselView = Backbone.View.extend({
2. initialize: function(options){
3. this.carouselOptions = _.defaults(options, {
4. jcarouselNext: '.next',
5. jcarouselPrev: '.prev',
6. autoPlay: true
7. //required jQuery plugin initialization
8. //spaghetti goes here
9. });
10. this.$el.find('ul').jcarousel(this.carouselOptions);
11. }
12. });
13.
14. var centerCarouselView = new CarouselView({
15. el: '.photos-portland',
16. jcarouselNext: '.next-portland',
17. jcarouselPrev: '.prev-portland'
18. });
What's wrong?
Rigidity
What to do?
Design Patterns
Facade
We use facades all the time
$(document).ready(func);$.ajax(options);$('input').val(newVal);$('input').on('click', func);
let's build a facade
Facade
What are the important pieces?
- next element
- prev element
- auto start
1. var CarouselView = Backbone.View.extend({
2. initialize: function(options){
3. var carouselOptions = _.defaults(options, {
4. jcarouselNext: '.next',
5. jcarouselPrev: '.next',
6. autoStart: false
7. //required jQuery plugin initialization
8. //spaghetti goes here
9. });
10. this.$el.find('ul').jcarousel({
11. jcarouselNext: carouselOptions.nextButtonSelector,
12. jcarouselPrev: carouselOptions.prevButtonSelector,
13. autoPlay: carouselOptions.autoStart
14. });
15. }
16. });
17.
18. //no jCarousel anywhere
19. var portlandView = new CarouselView({
20. el: $('.photos-portland'),
21. nextButtonSelector: '.next',
22. prevButtonSelector: '.prev',
23. autoStart: true //your own name if you want
24. });
reuse
1. var portlandView = new CarouselView({
2. el: $('.photos-portland'),
3. nextButtonSelector: '.next,
4. prevButtonSelector: '.prev'
5. });
6.
7. var sfView = new CarouselView({
8. el: $('.photos-sf'),
9. nextButtonSelector: '.next',
10. prevButtonSelector: '.prev'
11. });
12.
13. var nycView = new CarouselView({
14. el: $('.photos-nyc'),
15. nextButtonSelector: '.next',
16. prevButtonSelector: '.prev',
17. autoStart: true
18. });
Sensitivity to change
- complexity is hidden
- changes are much easier
Law of Demeter
Principle of Least Knowledge
My Goal
Takeaways
- jQuery plugins are useful
- Using them on their own is not the only option
- Find what you need to customize