Navigating through the JavaScript Library Jungle

  • 1,299 views
Uploaded on

The slides are part of a talk I did for my company, Namics. The talk was about picking javascript libraries, plugins and / or frameworks.

The slides are part of a talk I did for my company, Namics. The talk was about picking javascript libraries, plugins and / or frameworks.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,299
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • ----- Meeting Notes (30.8.2013 12:04) -----BegrüssungWegweiser durch die grosse Anzahl an LibrariesTipps zur Wahl
  • Die wiePilzeausdemBodenspriesenJavaScript oder Frontend EntwicklersindPersonen die gerneProblemelösen und ihreLösungenauchgernemitanderenteilen.
  • ----- Meeting Notes (30.8.2013 12:04) -----Bevor es weiter geht will ich etwas Klarheit bei den Begriffen schaffen
  • Library, Framework und Plugin werdenuntereinanderhäufigalsSynonymeverwenden. Eigentlich sind sie sehr unterschiedlich. Man kann sie alle als Werkzeuge betrachten, welche die Entwicklung vereinfachen und eine bessere User Experience ermöglichen.
  • A library provides a set of functions that are called----- Meeting Notes (30.8.2013 12:04) -----Eine Library is eine Gruppierung von Funktionen, welche von der eignen Applikation geschrieben werden
  • BeispielejQuery: Die bekannteste LibraryUnderscoreJS: Eine Util-Library, welche ein fester Bestandteil des BackboneJS Frameworks ist aber auch unabhängig genutzt werden kann.Raphael: Eine Library mit der man Graphiken produzieren kannLeafletJS: Eine Map Library, ähnlich wie google Maps aber für Open Street Maps.
  • Der eigene Code wird in das Framework intergriert und das Framework macht dann etwas mit dem Code.
  • BeispielTerrificJS. Man platziert den Javascript Code ins Framework hinein und lässt Terrific machen.
  • Die Begriffe sind erklärt.Die richtigen Plugins, Libraries und Frameworks zu finden ist nicht immer einfach.
  • Die grosse Auswahl kann es einem schwer machen. Esgibtviele Libraries da draussen und einigesindsichsehrähnlich.
  • EsgibtpraktischimmereineexistierendeLösung.
  • Hängt von viele Faktorenab, zudenenauch Support, Community und Tests gehören. Ichwerdespäternochmehrdarübererzählen. Fakt ist es gibt einiges zu beachten.
  • Nein, nie,essei den du bist Chuck Norris
  • EineDokumentationslose Library setztvorausdass die Person, welche die Library geschrieben hat, immervor ort ist und Zeit hat und niekrankistoder in den Ferienist.Provide a documentation so that others can use the library without having to rely on you. Create a demo for quicker comprehension and easier usage. Create tests to prove stability and ensure quality.Support popular browsers including mobile is mandatory. It matters whether a library supports IE8, IE9 and Chrome X.Host it on a public repo so others can fork it, improve it or submit bugsOnly write your own library if you seriously have time to
  • Provide a documentation so that others can use the library without having to rely on you. Create a demo for quicker comprehension and easier usage. Create tests to prove stability and ensure quality.Support popular browsers including mobile is mandatory. It matters whether a library supports IE8, IE9 and Chrome X.Host it on a public repo so others can fork it, improve it or submit bugsOnly write your own library if you seriously have time to
  • Provide a documentation so that others can use the library without having to rely on you. Create a demo for quicker comprehension and easier usage. Create tests to prove stability and ensure quality.Support popular browsers including mobile is mandatory. It matters whether a library supports IE8, IE9 and Chrome X.Host it on a public repo so others can fork it, improve it or submit bugsOnly write your own library if you seriously have time to
  • Wirhabenes an den letztenPunktengesehen. Eineeigene Library zuschreibenbenötigtvielZeit. Zeit die wirbeiunserenProjektenhäufignichthaben. Fragtsonst Remo Brunschwiler.
  • I know we developers enjoy writing code and fixing things. It's why we love our job. But don't reinvent the wheel or neglect other things
  • Let's get back to where we were about chosing a library
  • Visual: Adventurer with map or compassJam jarsHammer eg. Using a Hammer for a screw (wrong tool)
  • Diese Art von Blogseitensieht man überallDie 40 besten JS LibrariesDie 15 besten Overlay pluginsDie besten MVC FrameworksDie 20 besten Graphic LibrariesManchmalhabeich das Gefühl, dass die Entwicklerzufaulsindzumsuchen und sich in eineBibliothekeinzuarbeiten.
  • Klassisch
  • Icharbeiteaktuelle an einemProjektbestehendaus gut 30 Entwicklern, davon 8 Frontend Entwickler an einemStandort! Das isteinvölliganderesSzenarioals die One-Man Show
  • Intruducing new libraries costs time. There will be a learning curve and communication effort. Make sure it is worth the time.Reduce the learning curve by choosing libraries that others know. Developers cannot sense that a new library is being added. Avoid re inventing the wheel.Document all the 3rd party libraries used providing a reason for usage. This provides a good overview and also challenges it's usage.
  • Folge den Gurus auf Twitter.Lese Entwicklerblogshttp://coding.smashingmagazine.com/2009/03/02/40-stand-alone-javascript-libraries-for-specific-purposes/Go to tech talks and meet-upsJeder Frontend Endlerkennteinen Frontend Endler den erals Guru betrachtet. Oder fragtsonsteinfach...
  • EinzentralerEinstiegsortmitzahlreichen Links zu den bestenInformationsquellenfür Frontend-Entwickler
  • Und Fragenlohntsich. Der Publikums Joker istnichtumsonst der mächtigste
  • IndieserReihenfolge
  • Forderedeine Library-Auswahlheraus
  • Forderedeine Library-Auswahlaus
  • Forderedeine Library-Auswahlaus
  • Forderedeine Library-Auswahlaus
  • Forderedeine Library-Auswahlaus
  • Forderedeine Library-Auswahlaus
  • Ich mag Entenaber das ist e
  • Die wiePilzeausdemBodenspriesen

Transcript

  • 1. Frontend. JavaScript. Framework. Jungle. Namics. Thomas Junghans. Senior Frontend Engineer. 30. August 2013
  • 2. Namics.2.9.2013 2 Denken. Präsentieren. Umsetzen. JavaScript: Mit Karte und Kompass durch den Framework-Jungel
  • 3. 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
  • 4. Namics.2.9.2013 Denken. Präsentieren. Umsetzen.4 Wait! Before we go ahead
  • 5. Namics.2.9.2013 5 Denken. Präsentieren. Umsetzen. are all Tools Library, Terminology Framework and Plugins
  • 6. 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
  • 7. 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
  • 8. Namics.2.9.2013 8 Denken. Präsentieren. Umsetzen. jQuery UnderscoreJS Raphaël LeafletJS Library Examples
  • 9. 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
  • 10. Namics.2.9.2013 10 Denken. Präsentieren. Umsetzen. TerrificJS AngularJS KnockOutJS BackboneJS Framework Examples
  • 11. 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
  • 12. Namics.2.9.2013 12 Denken. Präsentieren. Umsetzen. jQuery.cookies jQuery.tooltip jQuery.validate jQuery.colorbox Plugin Examples (jQuery)
  • 13. Namics.2.9.2013 13 Denken. Präsentieren. Umsetzen. Finding the right tool is not that easy HikingArtist.com
  • 14. Namics.2.9.2013 14 Denken. Präsentieren. Umsetzen. Too many choices Source: El Bertin Glace, www.elbertin.ch
  • 15. Namics.2.9.2013 15 Denken. Präsentieren. Umsetzen. Is there a library for my problem? (99.99% sure there is)
  • 16. Namics.2.9.2013 16 Denken. Präsentieren. Umsetzen. Which library should I choose? (depends...)
  • 17. Namics.2.9.2013 17 Denken. Präsentieren. Umsetzen. Should I write my own library instead? (NO - except if...)
  • 18. Namics.2.9.2013 18 Denken. Präsentieren. Umsetzen. ...you're this guy OR...
  • 19. 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
  • 20. Namics.2.9.2013 20 Denken. Präsentieren. Umsetzen. Write your own library only if you can... (2/4) Support popular browsers including mobile
  • 21. 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
  • 22. 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
  • 23. Namics.2.9.2013 23 Denken. Präsentieren. Umsetzen. Writing your own library to solve a problem is always the last option Always.
  • 24. Namics.2.9.2013 24 Denken. Präsentieren. Umsetzen. Okay, back to choosing
  • 25. Namics.2.9.2013 25 Denken. Präsentieren. Umsetzen. Source: Google Search, 25. August 2013
  • 26. 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/
  • 27. 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
  • 28. Namics.2.9.2013 28 Denken. Präsentieren. Umsetzen. Team Project Client Future Things to consider before choosing a library
  • 29. Namics.2.9.2013 29 Denken. Präsentieren. Umsetzen. In a team of ONE frontend developer it's easy to introduce new libraries Team
  • 30. 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
  • 31. 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)
  • 32. 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
  • 33. Namics.2.9.2013 33 Denken. Präsentieren. Umsetzen. You cannot update jQuery just to meet the needs of a new library!
  • 34. 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
  • 35. 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
  • 36. 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
  • 37. 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
  • 38. Namics.2.9.2013 Denken. Präsentieren. Umsetzen.38 What's a good library experience?
  • 39. 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
  • 40. 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
  • 41. 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
  • 42. Namics.2.9.2013 Denken. Präsentieren. Umsetzen.42 Keeping up to date
  • 43. 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
  • 44. Namics.2.9.2013 44 Denken. Präsentieren. Umsetzen. Or just start here uptodate.frontendrescue.org
  • 45. 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?"
  • 46. Namics.2.9.2013 46 Denken. Präsentieren. Umsetzen. Ask StackOverflow Ask Quora Ask Twitter Ask Namics Ask others
  • 47. 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
  • 48. Namics.2.9.2013 48 Denken. Präsentieren. Umsetzen. Challenge your library decision Give yourself confidence Ask even if you have an answer already
  • 49. 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
  • 50. Namics.2.9.2013 50 Denken. Präsentieren. Umsetzen. Documentation Demo Tests Reliability indicators on Github
  • 51. Namics.2.9.2013 51 Denken. Präsentieren. Umsetzen. Reliability indicators on Github
  • 52. 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
  • 53. Namics.2.9.2013 53 Denken. Präsentieren. Umsetzen. Avoid one big tool, that does many things not so well Last tips
  • 54. 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."
  • 55. Namics.2.9.2013 55 Denken. Präsentieren. Umsetzen. "You must choose. Choose wisely!"
  • 56. 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