17. JavaScript libraries - Web Front-End

Uploaded on

How to create our own JavaScript Library …

How to create our own JavaScript Library
Telerik Software Academy: http://html5course.telerik.com
The website and all video materials are in Bulgarian

Table of contents:
What is a JavaScript library?
Prominent JavaScript libraries: prototype js, MooTools, jQuery, Dojo, YUI, KendoUI
JavaScript Library Fundamentals: Object creation / inheriting, Query, Traversing, Manipulation, Insertion / Deletion, Events, AJAX, Animations
Recommended features: All spiced up for basic users; Powerful syntax for advanced users; Strong coding convention

More in: Technology
  • 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


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. JavaScript Libraries How To Create Our Own JS LibraryIvan ZhekovFront-end Developerhttp://joneff.infoTelerik Software Academyacademy.telerik.com
  • 2. Table of Contents What is a JavaScript libraries Prominent JavaScript libraries  prototype js  MooTools  jQuery  Dojo  YUI  KendoUI 2
  • 3. Table of Contents (2) JavaScript Library Fundamentals  Object creation / inheriting  Query  Traversing  Manipulation  Insertion / Deletion  Events  AJAX  Animations 3
  • 4. Table of Contents (3) Recommended features  All spiced up for basic users  Powerful syntax for advanced users  Strong coding convention 4
  • 5. What is a JSL?Have you seen a moose? It’s nothing like it!
  • 6. What is a JSL A JS libraryis pre-written code that aims to facilitate and /or jump start development, especially AJAX based tasks A JS library:  Works around browser differences  Abstracts common work  Adds sugar and spice In addition it might have widgets, themes  … and even more sugar 6
  • 7. Library vs. Framework Technically speaking, it’s just text, so pick your favorite Never the less mind that in order to call a library a framework, it needs:  More features  More cases  Widgets  Full stack of dev love 7
  • 8. Prominent JSLA brief, based overview
  • 9. Prototype Created 2005 by Sam Stephenson One of the corner stones of JS, IMO Features  Object creation, DOM query, traversal, manip, events, Ajax, utility methods…  Scriptacolous / Scripty for animations / fx Sadly no development over the past year  … my personal favorite 9
  • 10. Prototype syntax Sample code // Get an element and attach event var header = $("header"); header.observe("click", function() { alert("Yay ... clicked :) "); }); // Delete all elements of tag name $$("a").each(Element.remove); // Ajax new Ajax.Request(url, { method: get, onSuccess: function(transport) {...} }); 10
  • 11. MooTools Created 2005 by Vallerio Proietti Initially moo.fx was a FX lib for prototype Developed over the years as a separate lib Features inspired by Prototype, but different:  Object creation, DOM query, traversal, manip, events, Ajax, utility methods… Some what active development 11
  • 12. Mootools syntax Sample code var header = $("header"); header.addEvnet("click", function() { alert("Yay ... clicked :) "); }); $$("a").each(function(element) { element.dispose(); }); var myRequest = new Request({ url: url, onSuccess: function(responseText, responseXML) {...} }); myRequest.send(); 12
  • 13. jQuery Created 2006 by John Resig Initially just selectors Have become one of the most powerful and used js libraries in the web Features  DOM query, traversal, manip, animations, Ajax, utility, plugins… Bundled with popular IDE’s Quite magical for n00bs 13
  • 14. jQuery syntax Sample code var header = $("#header"); header.bind("click", function() { alert("Yay ... clicked :) "); }); $("a").remove(); $.Ajax(url, { success: function(data) {...} }); 14
  • 15. Dojo Created 2005 by John Resig Somewhat underestimated, but powerful library with many features Features  DOM query, traversal, manip, animations, Ajax, utility, plugins…  UI widgets  Mobile Just released 1.7 15
  • 16. Dojo syntax Sample code var header = dojo.byId("header"); dojo.connect(header, "onclick", function() { alert("Yay ... clicked :) "); }); dojo.query("a").orphan(); dojo.xhrGet({ url: url, load: function(data) {...} }); 16
  • 17. YUI Created 2005 by Yahoo! Home grown and developed Features  DOM query, traversal, manip, animations, Ajax, utility, plugins…  UI widgets  Developer tools Still actively developed 17
  • 18. YUI syntax Sample code (for YUI3) YUI().use(["node", "io"], function (Y) { var header = Y.one("#container"); header.on("click", function() { alert("Yay ... clicked :) "); }); Y.all("a").remove(); Y.io(uri) }); 18
  • 19. Kendo UI Just released by Telerik So far, build on top of jQuery, but improved:  Blazing fast templates  Excels performance and ease of use Features:  UI widgets, templates, data visualizations  Serves CSS as browser compiled LESS Coming in mobile flavor soon 19
  • 20. KendoUI syntax Sample code // Kendo doesnt do DOM its all UI // It requires certain HTML to be on the page // auto complete widget $("#autocomplete").kendoAutoComplete(["Item1", "Item2"]); // calendar widget $("#calendar").kendoCalendar(); // dropdown widget $("#combobox").kendoComboBox([{text: "Item1", value: "1"}, {text: "Item2", value: "2"}]); // fancy upload $("#files").kendoUpload(); 20
  • 21. Other There are many, many, many, many, other js libraries out there  Some deal with common tasks  Other excel in UI  There are those who do JS MVC  And some do server side Just ask G about them 21
  • 22. Building our own JSL Ready! Set! Go!
  • 23. Roadmap We begin at the very end (feature wise) Ensure code quality Homogenous syntax Module patterns Get the job done, add candy later Let’s pretend that there are NO old browsers Then suddenly remember it and add support 23
  • 24. Recommended features Unicorns and rainbows
  • 25. Code Convention What is a coding convention?  A set of writing rules concerning some or all aspects of the coding  How to comment  How to name functions, variables, params etc.  White spaces… 25
  • 26. Code Convention (2) Why have one?  Homogenous code  Easier to read  May help avoid problems in the future  Some habits are just good 26
  • 27. Powerful Syntax That would be the normal way Libraries are generally wrapping native functionality  All native functionality should be achievable trough parameter combinations One of two ways to do that:  Have a single method for many operations  Have a method for each operation 27
  • 28. Syntax sugar Not a new thing – almost 50 years old concept Syntax sugar means having shorthand methods that do heavy lifting Sort of a Swiss army knife for some stuff Benefits:  Easier to read / compact code  Gentle learning curve  More expressive Cons: random hate… above all 28
  • 29. Documentation Documentation is essential  Don’t over document  Don’t under document Document just right:  No more or less than needed  Concrete sentences, clear language  Avoid disambiguation  Try to be neutral Update the docs in a timely manner! 29
  • 30. Examples The best documentation has examples  Never the less have separate examples  Organize examples in scenarios  Describe scenarios fluently  Elaborate if a scenario is a bad practice Help users choose between scenarios  Provide at least one example per scenario  Have as many examples as possible  Try not to mix code with content 30
  • 31. Community Don’t underestimate the community  The community is using the library  They are important, but not too important  Have your own opinion, but listen to others A proper community needs  Commenting articles, forums, tracking system, contribution system  Even awards A community is created by itself  And is dissolved that way 31
  • 32. Let’s startChat: show me the code
  • 33. Code convention It’s a bit see as we go, but just a start:  //comments preferably  Code indentation is one tab (set to four spaces)  Functions and properties are in camelCase  Objects and constructors are in PascalCase  If we need a getter use get_property  If we need private use _property  No curly braces for single line control structures  Use white space accordingly 33
  • 34. Object creation Object creation is important for:  Custom utility objects  UI widgets Magical base is overrated (IMO)  Actually, magic is overrated Simple inheriting first, multiple later Object factory  Prototype.create(…) 34
  • 35. Querying the DOM Specificity first  A method for one  A method for all / sub querying Return what’s expected:  One, Many or NULL Use built in methods where possible Optimize by analyzing parameters 35
  • 36. DOM traversal Not that different from querying  node.nodeType == 1 means HTML element The parentNode is usually an element Utility methods for:  Siblings – all, left, right, single  Children – first, last, all  Recursive parents Selectors based traversing 36
  • 37. Manipulation Attributes are mostly the same in HTML and DOM  With few minor exceptions First use concrete attributes  Then normalize input for easier development Mind that the style attribute is a bit different We could make it work to set or get multiple attributes at once Regardless of the choice for implementation, setting and getting props must work the same 37
  • 38. DOM insertions / deletions Cover the basic DOM insertion  Add extension methods for easier insertions, like prepend, insertAfter etc. Remember that innerHTML works faster in some cases and documentFragment in the rest Do we eval scripts upon insertion? 38
  • 39. DOM events For a proper event system  Events should not bubble e.g. last param is false We can make syntax that omits it  Unless one wants to specify it explicitly What do we do about anonymous events? How do we mass remove events? Event delegates Events handlers for collection of elements 39
  • 40. Ajax Just the basics  Implement methods for: post, get, put, delete  Use native objects  Don’t wait for forever to timeout  Status code vs. words based callbacks  Should the Ajax invoker be void? Plain old fetching data to populate elements Persistent connections 40
  • 41. Animations Ways to do it:  Interval with fixed steps  Interval with time based steps  Native request animation frame Stopping animations and reverting to base Chaining animations Animation callbacks Anything else you can think of 41
  • 42. JavaScript Libraries курсове и уроци по програмиране, уеб дизайн – безплатно BG Coder - онлайн състезателна система - online judge курсове и уроци по програмиране – Телерик академия форум програмиране, форум уеб дизайн уроци по програмиране и уеб дизайн за ученици ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NET http://academy.telerik.com програмиране за деца – безплатни курсове и уроци ASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC безплатен SEO курс - оптимизация за търсачки алго академия – състезателно програмиране, състезаниякурсове и уроци по програмиране, книги – безплатно от Наков курс мобилни приложения с iPhone, Android, WP7, PhoneGap уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop Дончо Минков - сайт за програмиране free C# book, безплатна книга C#, книга Java, книга C# Николай Костов - блог за програмиране безплатен курс "Качествен програмен код" безплатен курс "Разработка на софтуер в cloud среда" C# курс, програмиране, безплатно
  • 43. Free Trainings @ Telerik Academy "Web Design with HTML 5, CSS 3 and JavaScript" course @ Telerik Academy  html5course.telerik.com Telerik Software Academy  academy.telerik.com Telerik Academy @ Facebook  facebook.com/TelerikAcademy Telerik Software Academy Forums  forums.academy.telerik.com