Building Web Applications

Using JavaScript, MochiKit and Dojo

Part II - MochiKit

Anant Narayanan

Malaviya National Institute of Technology, Jaipur

Overview - Part II

• Introduction to MochiKit
• Making AJAX work
• Functional programming
• DOM Manipulation
• JavaScript Interpreter

Introduction

• Bob Ippolito's brainchild
• Programmer's Paradise!
• Extremely well thought out and heavily documented
• "Borrows" lots of ideas from Python and Twisted

Using MochiKit

• Does not interfere with other JavaScript Code
• Possible to prevent functions from being exported to global namespace
• Available as "Packed"' and "Split" versions
• Split into 14 categories: Asyc, Base, DOM, DragAndDrop, Color, DateTime, Format, Iter, Logging, LoggingPane, Signal, Style, Sortable, Visual

Program, don't design with this!

• More of a programming aid than a visual widget/animation set
• DragAndDrop, Visual picked from script.aculo.us
• Added only recently, buggy...
• Other 12 categories rock!

Let's take a look at them...

AJAX with MochitKit.Async

• Uses Deferred object, much like in Twisted
• Represents a value that you don't have with you yet
• Attach callbacks to the object, they are called when value is ready (or error is encountered)
• Or use the doSimpleXMLHttpRequest to send a quick GET request to a URL (returns a Deferred object)
• Use the getXMLHttpRequest method to obtain a XMLHttpRequest object transparently
• Quick and Painless, abstracts all browser incompatibilities!

Functional programming with MochiKit.Base

• Excellent methods to make programming easier
• Use compare to sensibly match two objects: Arrays, Dates, Strings and Numbers
• You can add your own custom comparator with registerComparator
• Provides programmer representation, just like repr in Python
• Evaluate JSON strings (evalJSON) and create serialized JSON from objects (serializeJSON)

MochiKit.Base (continued)

• Want to copy over key:value pairs to an existing object? update it!
• What to use an exclusively mutable object? clone is your friend!
• Want to iterate over a tree of objects? Check out nodeWalk!
• Want to apply the same function on all objects of an array? Just map it!
• Want to supply only partial arguments to a function? partial lets you do just that!
• Lots and Lots of more nifty stuff... Python programmers feel at home :)

DOM it with MochiKit.DOM

• Easily the best DOM creation and manipulation API
• Creating Nodes is a piece of Cake with createDOM
• Commonly used tags are available as aliases to make things even more easier! (A, BUTTON, DIV, TABLE etc.)
• Get DOM nodes based on their class with getElementsByTagAndClassName
• Convert your own objects into DOM Nodes using registerDOMConverter
• scrapeText out of any DOM Node of your choice
• All the standard DOM functions have wrappers with added functionality...

MochiKit.Color and MochiKit.DateTime

• CSS3 based Color abstraction
• Interconvert Strings, RGB, Hex, HSV and HSL values
• Control brightness, intensity and alpha values
• Convert between ISO and JavaScript Date objects

MochiKit.Format and MochiKit.Iter

• Do all kinds of string formatting
• Inspired by the Number format pattern Syntax of Java
• Iteration in JavaScript made easy, again, inspired by Python's iteration and itertools modules
• Add iteration capabilities to your custom objects with registerIterator
• forEach is most useful when you need to iterate over an iterable
• Standard stuff like count, next, range available

Debug with MochitKit.Logging

• Stop peppering your code with alert!
• JavaScript logs viewabale in FireFox
• Otherwise use the LoggingPane
• Opens up a popup window, very useful for debugging
• Use the log method, different levels such as DEBUG, INFO, WARN possible

Handle events with MochiKit.Signal

• More amazing than MochiKit.DOM!
• Connect DOM events, Browser events, Object events freely through unified API!
• Mother of all event API's - single connect function
• All DOM events converted to lower case: onClick becomes `onclick'
• Synthesized events like onmouseenter
• Based on Qt's signal-slot system
• Use signal to trigger your own signal

Spice up with MochiKit.Style and MochiKit.Visual

• CSS and Visual Effects
• Mostly adapted from script.aculo.us
• Modify CSS characteristics, hide and show elements
• Some good transition effects
• No layout and widgets though...

Dojo and script.aculo.us better at this kind of stuff :)

MochiKit.DragAndDrop and MochiKit.Sortable

• Easy to use, smooth drag and drop
• Not very powerful though!
• Nice if your app doesn't need very snazzy stuff
• And it's quite light...

The MochiKit JavaScript Interpreter

• It's the icing on the cake!
• Enables efficient debugging and rapid prototyping
• Quickly try out MochiKit (and other) JavaScript methods
• Yeah, it's like the Python Interpreter... Again!

Okay that's enough of programming...

How do I make websites with amazing looks?

Dojo will take care of your appearance...

Any questions so far?