Skip to content

Commit 1c31284

Browse files
committed
First commit; content from mootorial.com
0 parents  commit 1c31284

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+5430
-0
lines changed

.DS_Store

6 KB
Binary file not shown.

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.DS_Store

00-whatisit.txt

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
====== Getting Started: What is MooTools? ======
2+
3+
MooTools is a lightweight abstraction layer between the browser and the code you write (this is really the definition of nearly every js framework out there - Prototype, Dojo, jQuery, YUI, etc). It offers more functionality and richer tools for writing javascript, taking what has historically been painful and fraught with buggy environments (the browsers) and presenting you with a much more reliable environment. By adding it to your environment (i.e. including the script in your page) you are able to write succinct, readable, and reusable code more effectively and efficiently than without it.
4+
5+
MooTools at its core re-creates pseudo-classical inheritance with Classes that allow for extensible and reusable behaviors. Additionally, it provides its own set of classes to allow you to quickly and easily describe effects such as resizing, fading, moving, dragging, and more (ajax, json, etc). The code to make something transition from one state to another (fading, moving, resizing, etc.) is very succinct and MooTools does the rest.
6+
7+
MooTools also provides extensive DOM tools to allow you to select elements from the document, create new elements, and alter them. There are also shortcut helper functions (like $, $type, $chk, $random, etc.) that help you with common tasks.
8+
9+
With MooTools in your environment, you still write Javascript when it comes to basic syntax, but to a great extent you are NOT writing Javascript anymore; you're writing MooTools. The benefit here is that not only is the framework doing a lot of the work (and you don't run into nearly as many cross-browser issues), but if there is a bug or a change because of a new browser release, the framework can be altered without requiring you to rewrite all your code.
10+
11+
These levels of abstraction enable you to write far richer clientside applications.
12+
13+
14+
===== Getting Started =====
15+
Sounds great! So what do I have to do to get started? Well, for starters, you need to know javascript. MooTools isn't something you can just add to your pages and suddenly they come alive. MooTools is a javascript library and it gives you access to all these cool functions, but you still have to tell it what to do.
16+
17+
18+
19+
20+
==== Step 1: Learn Javascript! ====
21+
There's a nice [[http://blog.mootools.net/2007/6/5/help-i-dont-know-javascript|roundup of Javascript resources]] at the [[http://blog.mootools.net|MooTools Blog]]. I recommend the following strongly:
22+
23+
* [[http://www.youtube.com/watch?v=v2ifWcnQs6M|Douglas Crockford: The Javascript Programming Language]] - This video is a must-watch. If you're new to javascript or are rusty, start here.
24+
* [[http://www.youtube.com/watch?v=DwYPG6vreJg|Dougals Crockford: Advanced Javascript]] - This one is a little less useful but still very informative. Is is less useful because MooTools creates a different kind of environment than Douglas is describing (he talks about native Javascript, and MooTools kind of changes this native environment and so many of his code examples don't apply to MooTools, but you can still learn from them).
25+
* [[http://rds.yahoo.com/_ylt=A0WTQ1d1bW1G8iMBoSYCP88F;_ylu=X3oDMTBjMHZkMjZyBHBvcwMxBHNlYwNzcg--/SIG=122e20mkk/EXP=1181662965/**http%3A//video.yahoo.com/video/play%3Fvid=111597|Joe Hewitt presents Firebug]] - this video will introduce you to [[http://getfirebug.com|Firebug]], a must-have debugging tool if you're doing any javascript work (actually, if you're doing any html, css, javascript, ajax, whatever; it's awesome).
26+
* [[http://w3schools.com/js/default.asp|w3schools js docs and tutorials]] - a good place to learn how to use various native functions.
27+
28+
29+
30+
==== Step 2: Download MooTools ====
31+
Downloading MooTools is pretty easy. You just go to [[http://www.mootools.net/download|the download page]] and select which portions of the library you want to download.
32+
33+
I recommend downloading the version that is not compressed and contains the docs for learning and development. This way if you get an error you can view the source and see what's going on. The compressed version is all on a single line and debugging when using it is very frustrating. When you're finished writing your code, download the compressed version, or compress it yourself with [[http://developer.yahoo.com/yui/compressor/]].
34+
35+
36+
==== Step 3: Add it to your pages ====
37+
Just create a <script> tag in the head of your document that points to your copy of MooTools. After this tag add another one that either points to an external file with your own javascript that uses MooTools, or write it inline:
38+
39+
<code html>
40+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
41+
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
42+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
43+
<head profile="http://gmpg.org/xfn/11">
44+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
45+
<title>Your title</title>
46+
<script type="text/javascript" src="mootools.js"></script>
47+
<script type="text/javascript" src="yourSiteCode.js"></script>
48+
<script type="text/javascript">
49+
//or write some code in-line
50+
</script>
51+
</head>
52+
<body>....</body>
53+
</html>
54+
</code>
55+
56+
I prefer to have my code in an external file, but where you put it is up to you.
57+
58+
59+
60+
61+
==== Step 4: Write your code ====
62+
That's where this Mootorial can help you. If you read these pages (I recommend reading them in order) you should learn how each function and class in MooTools works. Refer to [[http://docs.mootools.net|the docs]] for reference and don't be afraid to look at the source code of MooTools to see how it works.
63+
64+
You need to use things like the [[mootorial:05-utilities:01-domready|domready.js]] event to run your code after the html is loaded and use [[02-class]] to create reusable code. You can also read [[09-howtowriteamootoolsclass|this tutorial on how to write a MooTools Class]].
65+
66+
===== On to the MooTorial =====
67+
{{indexmenu>:mootorial#1|sort+fn}}

00a-mootoolsvsothers.txt

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
====== MooTools vs. Other Frameworks ======
2+
3+
I used to work at CNET.com, which is a pretty big corporation with a big web presence. We spent a lot of time evaluating frameworks (documented in our blog at [[http://clientside.cnet.com]] - which is now [[http://www.clientcide.com]]) and ultimately settled on MooTools.
4+
5+
When people ask me which framework to choose I can only tell them what my opinion is. My personal opinion is that you really can't go wrong with Dojo, YUI, Prototype, jQuery, or MooTools (there are others out there - don't snipe me because I left a good one out! Remember //it's a wiki//.). These frameworks are all good stuff. They all have their different focuses and approaches to problems. Some focus on very different philosophies.
6+
7+
MooTools and Prototype both believe strongly in altering the prototypes of native elements (String, Array, Function, etc. - except Object, never Object!). YUI, jQuery, and (I think?) Dojo don't do this. Both YUI and jQuery are highly namespaced, which makes them ideal for environments you don't control completely, while MooTools won't play nice with other frameworks that use function names like $ or modify the native objects themselves (Prototype being the most notable). The only downsides to the namespacing are that the code is sometimes a little verbose (esp. in YUI's case, not in jQuery's though) and they'll always be slightly slower than methods added to native prototypes, though it's unlikely that this speed hit will be noticable to you unless you are iterating over a LOT of objects. These things are not bad things, it's just the way these frameworks are.
8+
9+
The advantage to modifying the native elements (aside from a slight speed advantage) is that you can add methods to these elements and extend their functionality. It's the difference between "hi".alert() and alert("hi"). It's subtle, but the former example is how javascript itself works. The downside is that if you define a method (like, say, Array.each) and something else in your environment (another script) defines the same thing, one might now be broken. The positive side is a more elegant model for adding functionality to things (at least I think so).
10+
11+
Additionally, some frameworks focus on re-creating a somewhat traditional inheritance model. MooTools focuses on this and highly encourages code reuse and modular designs. All frameworks have methods to create reusable code - I'm not saying they don't. But the heart of MooTools is based on this, and regardless of other frameworks that may or may not also focus on this aspect, it is MooTools' primary focus. Javascript has a //prototypal// inheritance model, and MooTools (and similar frameworks) create a structure to take advantage of this model in a way that will be more familiar to developers more used to languages like Java.
12+
13+
MooTools also is designed in a modular fashion so that you don't need all of it to make a page work. If you only need Ajax, you can deliver less Javascript.
14+
15+
If I were to sum up what makes MooTools special, it's that it makes Javascript better. It focuses on the Javascript programming language and seeks to streamline it, but not deviate from the basic principles of what makes Javascript javascript. It's not trying to look like css, and it's not trying to look like C++ or Java (though its class architecture is certainly more similar to Java than traditional javascript in some ways). Other frameworks do this too (and here I'm thinking of Prototype). What MooTools has that Prototype doesn't (er, the last time I looked anyway) is a set of animation routines and a few plugins (like sortables and drag and drop). If you use Prototype, you must include both it and another library like Scriptaculous. MooTools modular design is also a //much// smaller footprint than Prototype + Scriptaculous.
16+
17+
I'll reiterate that choosing any of these frameworks isn't a bad thing to do. Look at the strengths of the other options. Choose the one that suits your needs and your design principles and offers the right mix of flexibility and functionality.

0 commit comments

Comments
 (0)