Libraries and APIs CMPT 281

Overview Basics of libraries and APIs Rich internet applications Examples – Scriptaculous – JQuery

What is a library? A collection of software modules that provides services to another program A way to extend the functionality of a programming language A way to modularize software development Application Library A Library B

What is an API? “Application Programming Interface” The set of functions or commands that is made available by a library

Why libraries for web development? To improve the interactive experience Many tasks are difficult with just HTML/CSS – e.g., poor set of interface widgets – Libraries allow reuse of good solutions – “javascript libraries” Many web services exist on the internet – External libraries with a different delivery model – e.g., Google Maps, Flickr, WeatherBug

All libraries have an API

JavaScript Libraries

Prototypewww.prototypejs.org/ script.aculo.usscript.aculo.us/ Yahoo! User Interface Librarydeveloper.yahoo.com/yui/ Dojodojotoolkit.org/ jQueryjquery.com/ MooToolsmootools.net/ Raphaelraphaeljs.net

What do JS libraries do? Animation effects User interface widgets JS programming shortcuts Graphics AJAX – Asynchronous Javascript And XML...and more, depending on the library

But, beware... Libraries can make things more complex They can change the way JS works They may not be complete or well supported They can be difficult to learn (examples!) So, don’t depend on them! – e.g., only use plain JS on the final exam, unless asked to use a library

How to use JS libraries Same principle as external JS: Some libraries are stored on your site: Some libraries are accessed from their home:

Example: effects in Scriptaculous

Using Scriptaculous Docs: 1. Download the libraries – 2. Put them where your page can see them – e.g., a libraries/ directory 3. Load them into your page – Note that ‘scriptaculous’ depends on ‘prototype’ 4. Use the functions in the API

The Scriptaculous API

Core effects new Effect.EffectName(element, params, [options]); Example: new Effect.Opacity(‘element_id', { duration: 2.0, from: 1.0, to: 0.5 });

Scriptaculous effects demo

Example: effects in JQuery

Using JQuery (see docs.jquery.com/Tutorials:Getting_Started_with_jQuery) 1. No download required 3. Load the library into your page 4. Use the functions in the API

JQuery effects demo

Effects without libraries?