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

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

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

navigating your way through the rfid jungle

javascript dom. slide 2 lecture overview the basics of the...

what is javascript? embedding javascript with html...

navigating by the stars: using futures methodologies to...

navigating the culture theory jungle: … · ·...

holyrood academy, navigating our way through ssat ... ·...

“in the jungle the mighty jungle the lion sleeps...

making sense out of a jungle of javascript frameworks

in support of hemopet personalized nutrition for your dog ...

navigating the bundle jungle - ey · the bundle jungle...

course dans la jungle course dans la...

jasoosi duniya no. 2 - khaufnak jungle (the terrifying...

navigating the fund type jungle -...

bd de kiosque & jungle - temps...

the jungle through javascript frameworks. · jonatan...

navigating the jungle of pre-adolescence

€¦ · jungle palace jungle farm jungle chalet jungle...

june 2013 jungle talk page 1 jungle talkjungle...

jungle news january 30-feb.3, 2012 jungle news acmacm

navigating the intellectual property jungle in china by luc...