17. javascript libraries - web front-end
TRANSCRIPT
JavaScript LibrariesHow To Create Our Own JS Library
Ivan Zhekov
Telerik Software Academyacademy.telerik.com
Front-end Developerhttp://joneff.info
http://html5course.telerik.com
Table of Contents What is a JavaScript libraries Prominent JavaScript libraries
prototype js MooTools jQuery Dojo YUI KendoUI
2
Table of Contents (2) JavaScript Library Fundamentals
Object creation / inheriting Query Traversing Manipulation Insertion / Deletion Events AJAX Animations
3
Table of Contents (3) Recommended features
All spiced up for basic users Powerful syntax for advanced users Strong coding convention
4
What is a JSL?Have you seen a moose?
It’s nothing like it!
What is a JSL A JS library is 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
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
Prominent JSLA brief, based overview
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
Prototype syntax Sample code// Get an element and attach eventvar header = $("header");header.observe("click", function() {
alert("Yay ... clicked :) ");});
// Delete all elements of tag name$$("a").each(Element.remove);
// Ajaxnew Ajax.Request(url, {
method: 'get',onSuccess: function(transport) {...}
});
10
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
Mootools syntax Sample codevar 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
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
jQuery syntax Sample codevar header = $("#header");header.bind("click", function() {
alert("Yay ... clicked :) ");});
$("a").remove();
$.Ajax(url, {success: function(data) {...}
});
14
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.715
Dojo syntax Sample codevar header = dojo.byId("header");dojo.connect(header, "onclick", function() {
alert("Yay ... clicked :) ");});
dojo.query("a").orphan();
dojo.xhrGet({url: url,load: function(data) {...}
});
16
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
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
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
KendoUI syntax Sample code// Kendo doesn't do DOM it's 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
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
Building our own JSLReady! Set! Go!
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
Recommended featuresUnicorns and rainbows
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
Code Convention (2) Why have one?
Homogenous code Easier to read May help avoid problems in the
future Some habits are just good
26
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
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
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
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
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
Let’s startChat: show me the code
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
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
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
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
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
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
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
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 connections40
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
форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно
програмиране за деца – безплатни курсове и уроцибезплатен SEO курс - оптимизация за търсачки
уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop
уроци по програмиране и уеб дизайн за ученициASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC
безплатен курс "Разработка на софтуер в cloud среда"
BG Coder - онлайн състезателна система - online judge
курсове и уроци по програмиране, книги – безплатно от Наков
безплатен курс "Качествен програмен код"
алго академия – състезателно програмиране, състезанияASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NET
курсове и уроци по програмиране – Телерик академия
курс мобилни приложения с iPhone, Android, WP7, PhoneGapfree C# book, безплатна книга C#, книга Java, книга C# Дончо Минков - сайт за програмиране
Николай Костов - блог за програмиранеC# курс, програмиране, безплатно
?? ? ?
??? ?
?
? ?
??
?
?
? ?
Questions?
?
JavaScript Libraries
http://academy.telerik.com
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