Navigating through the JavaScript Library Jungle

1,650 views

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,650
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

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
  • Navigating through the JavaScript Library Jungle

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

    ×