Frontend. JavaScript. Framework. Jungle. Namics.
Thomas Junghans. Senior Frontend Engineer. 30. August 2013
Namics. 2.9.2013 2 Denken. Präsentieren. Umsetzen.
JavaScript: Mit Karte und Kompass durch den Framework-Jungel
Namics. 2.9.2013 3 Denken. Präsentieren. Umsetzen.
"We live in a world where we encourage our fellow developers to share and open source their solutions, especially in the land of JavaScript libraries."
Source: Pamela Fox, 3.7.2013, http://blog.pamelafox.org/2013/07/which-javascript-library-should-i-pick.html
Namics. 2.9.2013 Denken. Präsentieren. Umsetzen. 4
Wait! Before we go ahead
Namics. 2.9.2013 5 Denken. Präsentieren. Umsetzen.
are all Tools
Library,
Terminology
Framework and
Plugins
Namics. 2.9.2013 6 Denken. Präsentieren. Umsetzen.
"Inversion of Control is a key part of what makes a framework different to a library"
Framework vs. Library
Source: Martin Fowler, 26.5.2005, http://martinfowler.com/bliki/InversionOfControl.html
Namics. 2.9.2013 7 Denken. Präsentieren. Umsetzen.
"A library is essentially a set of functions that you can call […]. Each call does some work and returns control to the client."
Library
Source: Martin Fowler, 26.5.2005, http://martinfowler.com/bliki/InversionOfControl.html
Namics. 2.9.2013 8 Denken. Präsentieren. Umsetzen.
jQuery UnderscoreJS Raphaël LeafletJS
Library Examples
Namics. 2.9.2013 9 Denken. Präsentieren. Umsetzen.
"…methods defined by the user to tailor the framework will often be called from within the framework itself, rather than from the user's application code."
Framework
Source: Ralph Johnson and Brian Foote, 1988, http://www.laputan.org/drc/drc.html
Namics. 2.9.2013 10 Denken. Präsentieren. Umsetzen.
TerrificJS AngularJS KnockOutJS BackboneJS
Framework Examples
Namics. 2.9.2013 11 Denken. Präsentieren. Umsetzen.
"A software plug-in is an add-on for a program that adds functionality to it."
Plugin
Source: http://www.techterms.com/definition/plugin
Namics. 2.9.2013 12 Denken. Präsentieren. Umsetzen.
jQuery.cookies jQuery.tooltip jQuery.validate jQuery.colorbox
Plugin Examples (jQuery)
Namics. 2.9.2013 13 Denken. Präsentieren. Umsetzen.
Finding the right tool is not that easy
HikingArtist.com
Namics. 2.9.2013 14 Denken. Präsentieren. Umsetzen.
Too many choices
Source: El Bertin Glace, www.elbertin.ch
Namics. 2.9.2013 15 Denken. Präsentieren. Umsetzen.
Is there a library for my problem?
(99.99% sure there is)
Namics. 2.9.2013 16 Denken. Präsentieren. Umsetzen.
Which library should I choose?
(depends...)
Namics. 2.9.2013 17 Denken. Präsentieren. Umsetzen.
Should I write my own library instead?
(NO - except if...)
Namics. 2.9.2013 18 Denken. Präsentieren. Umsetzen.
...you're this guy OR...
Namics. 2.9.2013 19 Denken. Präsentieren. Umsetzen.
Write your own library only if you can... (1/4)
Provide a full documentation, a demo show how to use and (unit-) tests
Namics. 2.9.2013 20 Denken. Präsentieren. Umsetzen.
Write your own library only if you can... (2/4)
Support popular browsers including mobile
Namics. 2.9.2013 21 Denken. Präsentieren. Umsetzen.
Write your own library only if you can... (3/4)
Host it on a public repository such as Github Share it with the community Unless company regulations forbid this of course
Namics. 2.9.2013 22 Denken. Präsentieren. Umsetzen.
Write your own library only if you can... (4/4)
Take your time to create, maintain and support your library
Namics. 2.9.2013 23 Denken. Präsentieren. Umsetzen.
Writing your own library to solve a problem is always the last option
Always.
Namics. 2.9.2013 24 Denken. Präsentieren. Umsetzen.
Okay, back to choosing
Namics. 2.9.2013 25 Denken. Präsentieren. Umsetzen.
Source: Google Search, 25. August 2013
Namics. 2.9.2013 26 Denken. Präsentieren. Umsetzen.
"There are so many new JavaScript tools lately. So many that we can't keep up."
Source: WebTuesday, http://webtuesday.ch/meetings/20130813/
Namics. 2.9.2013 27 Denken. Präsentieren. Umsetzen.
"...And if one of these libraries can’t do the job, a plug-in probably exists that can."
"40 Useful JavaScript Libraries"
Source: coding.smashingmagazine.com/2009/03/02/40-stand-alone-javascript-libraries-for-specific-purposes
Namics. 2.9.2013 28 Denken. Präsentieren. Umsetzen.
Team Project Client Future
Things to consider before choosing a library
Namics. 2.9.2013 29 Denken. Präsentieren. Umsetzen.
In a team of ONE frontend developer it's easy to introduce new libraries
Team
Namics. 2.9.2013 30 Denken. Präsentieren. Umsetzen.
In a team of TWO or MORE, every new library needs to be challenged & discussed
Team
Namics. 2.9.2013 31 Denken. Präsentieren. Umsetzen.
Introducing new libraries costs time Choose libraries that most of the team know already Inform EVERYONE about new libraries Document library usage
Big Frontend Teams (> 3)
Namics. 2.9.2013 32 Denken. Präsentieren. Umsetzen.
New: If it's a new project you have freedom of choice Existing: If it's an older project you will need to choose libraries that play nice with existing ones
Project
Namics. 2.9.2013 33 Denken. Präsentieren. Umsetzen.
You cannot update jQuery just to meet the needs of a new library!
Namics. 2.9.2013 34 Denken. Präsentieren. Umsetzen.
What if a library needs to be compatible with jQuery 1.6.4 and 1.8.1? Hint: .on() was introduced in jQuery 1.7. Use .bind() instead
Namics. 2.9.2013 35 Denken. Präsentieren. Umsetzen.
Some client IT-departments require 3rd party libraries to be approved. This means you cannot just include any library
Client
Namics. 2.9.2013 36 Denken. Präsentieren. Umsetzen.
Check the source code licence "Experienced developers won't touch unlicensed code because they have no legal right to use it." Read this: http://www.codinghorror.com/blog/2007/04/pick-a-license-any-license.html)
Client
Namics. 2.9.2013 37 Denken. Präsentieren. Umsetzen.
Is a library future friendly? Will the library still be around for a while, supported and maintained?
Future
Namics. 2.9.2013 Denken. Präsentieren. Umsetzen. 38
What's a good library experience?
Namics. 2.9.2013 39 Denken. Präsentieren. Umsetzen.
Well documented Flexibility Responsive community
Will it be a good developer experience?
Source: Pamela Fox, 3.7.2013, http://blog.pamelafox.org/2013/07/which-javascript-library-should-i-pick.html
Namics. 2.9.2013 40 Denken. Präsentieren. Umsetzen.
Actively maintained Future Thinking Tested Clean code
Will it be a good developer experience?
Source: Pamela Fox, 3.7.2013
Namics. 2.9.2013 41 Denken. Präsentieren. Umsetzen.
File size Performance Browser support Accessibility
Responsive
Will it be a good user experience?
Source: Pamela Fox, 3.7.2013
Namics. 2.9.2013 Denken. Präsentieren. Umsetzen. 42
Keeping up to date
Namics. 2.9.2013 43 Denken. Präsentieren. Umsetzen.
Find out about new and popular libraries on Twitter / Google+ Blogs Tech Talks and Meet-Ups Your frontend guru colleagues
Namics. 2.9.2013 44 Denken. Präsentieren. Umsetzen.
Or just start here
uptodate.frontendrescue.org
Namics. 2.9.2013 45 Denken. Präsentieren. Umsetzen.
Using the audience joker
It's the most powerful joker in "Who Wants to Be a Millionaire?"
Namics. 2.9.2013 46 Denken. Präsentieren. Umsetzen.
Ask StackOverflow Ask Quora Ask Twitter Ask Namics
Ask others
Namics. 2.9.2013 47 Denken. Präsentieren. Umsetzen.
Know Namics Ask your colleagues Skype Frontend Channel Local Tech-Talks (eg Frontend & Pommes)
Asking Namics
Namics. 2.9.2013 48 Denken. Präsentieren. Umsetzen.
Challenge your library decision Give yourself confidence
Ask even if you have an answer already
Namics. 2.9.2013 49 Denken. Präsentieren. Umsetzen.
Last update / Activity Number of forks (higher = better) Number of stars (higher = better)
Reliability indicators on Github
Namics. 2.9.2013 50 Denken. Präsentieren. Umsetzen.
Documentation Demo Tests
Reliability indicators on Github
Namics. 2.9.2013 51 Denken. Präsentieren. Umsetzen.
Reliability indicators on Github
Namics. 2.9.2013 52 Denken. Präsentieren. Umsetzen.
Choose a set of small tools where each tool does one thing really well
Last tips
Namics. 2.9.2013 53 Denken. Präsentieren. Umsetzen.
Avoid one big tool, that does many things not so well
Last tips
Namics. 2.9.2013 54 Denken. Präsentieren. Umsetzen.
"A duck can walk, fly and swim, but he can’t do any of these things well."
Namics. 2.9.2013 55 Denken. Präsentieren. Umsetzen.
"You must choose. Choose wisely!"
Namics.
Sources
http://blog.pamelafox.org/2013/07/which-javascript-library-should-i-pick.html
http://visualstudiomagazine.com/articles/2012/06/01/gunfight-at-the-ok-corral-javascript-libraries.aspx
2.9.2013 Denken. Präsentieren. Umsetzen. 56
Top Related