Navigating through the JavaScript Library Jungle

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


"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


are all Tools

Library,

Terminology

Framework and

Plugins


"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


"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


jQuery UnderscoreJS Raphaël LeafletJS

Library Examples


"…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


TerrificJS AngularJS KnockOutJS BackboneJS

Framework Examples


"A software plug-in is an add-on for a program that adds functionality to it."

Plugin

Source: http://www.techterms.com/definition/plugin


jQuery.cookies jQuery.tooltip jQuery.validate jQuery.colorbox

Plugin Examples (jQuery)


Finding the right tool is not that easy

HikingArtist.com


Too many choices

Source: El Bertin Glace, www.elbertin.ch


Is there a library for my problem?

(99.99% sure there is)


Which library should I choose?

(depends...)


Should I write my own library instead?

(NO - except if...)


...you're this guy OR...


Write your own library only if you can... (1/4)

Provide a full documentation, a demo show how to use and (unit-) tests



Support popular browsers including mobile



Host it on a public repository such as Github Share it with the community Unless company regulations forbid this of course



Take your time to create, maintain and support your library


Writing your own library to solve a problem is always the last option

Always.


Okay, back to choosing


Source: Google Search, 25. August 2013


"There are so many new JavaScript tools lately. So many that we can't keep up."

Source: WebTuesday, http://webtuesday.ch/meetings/20130813/


"...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


Team Project Client Future

Things to consider before choosing a library


In a team of ONE frontend developer it's easy to introduce new libraries

Team


In a team of TWO or MORE, every new library needs to be challenged & discussed

Team


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)


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


You cannot update jQuery just to meet the needs of a new library!


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


Some client IT-departments require 3rd party libraries to be approved. This means you cannot just include any library

Client


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


Is a library future friendly? Will the library still be around for a while, supported and maintained?

Future


What's a good library experience?


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


Actively maintained Future Thinking Tested Clean code

Will it be a good developer experience?

Source: Pamela Fox, 3.7.2013


File size Performance Browser support Accessibility

Responsive

Will it be a good user experience?

Source: Pamela Fox, 3.7.2013


Keeping up to date


Find out about new and popular libraries on Twitter / Google+ Blogs Tech Talks and Meet-Ups Your frontend guru colleagues


Or just start here

uptodate.frontendrescue.org


Using the audience joker

It's the most powerful joker in "Who Wants to Be a Millionaire?"


Ask StackOverflow Ask Quora Ask Twitter Ask Namics

Ask others


Know Namics Ask your colleagues Skype Frontend Channel Local Tech-Talks (eg Frontend & Pommes)

Asking Namics


Challenge your library decision Give yourself confidence

Ask even if you have an answer already


Last update / Activity Number of forks (higher = better) Number of stars (higher = better)

Reliability indicators on Github


Documentation Demo Tests



Choose a set of small tools where each tool does one thing really well

Last tips


Avoid one big tool, that does many things not so well

Last tips


"A duck can walk, fly and swim, but he can’t do any of these things well."


"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

Navigating through the JavaScript Library Jungle

Technology

Transcript of Navigating through the JavaScript Library Jungle