Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Developing the Future of


Future of Web Apps 2012 - Prague

About Me

Let's talk about web dev...

Old School

You used some server-side scripting language to talk to your database via SQL and produce an HTML document that you deliver to a browser, and maybe sprinkle some DHTML & AJAX on top.

Web pages were (mostly) static, and gave consistent experiences across all browsers.

New School

That's a lot of things to consider!


Proper web development is pretty hard these days if you aren't using tools, frameworks, libraries, and toolkits.

YUI is a JavaScript toolkit.


Core concepts:

What a YUI app looks like

<!-- Include the seed file -->
<script src="yui.js"></script>

<!-- The `YUI` object is now available and can load in any JS or CSS in the most optimal and efficient way possible. -->
        
<script>
    // Create a YUI sandbox on your page.
    YUI().use('node', 'anim', 'event', function (Y) {
        // You can now manipulate DOM objects, animate movement, and use custom events
    });
</script>
        
<script>
    // Loads more than just YUI modules!
    var YUI_config = {
        modules: { 
            'jQuery': { fullpath: '/path/to/jquery.js' } 
        }
    };
    
    YUI().use('jQuery', function(Y) {
        // $ is now available
    });
</script>
        

By using YUI you get an asset loader, modules w/ dependency resolution, 300+ core modules, 400+ "Gallery" modules, an incredibly involved community (!!), and core team at Yahoo! dedicated to helping your apps be awesome.


Woot!

So you now have a foundation to build any Web application possible, including...

Because is a first-class environment for , that means it runs just as well there as it does in

Node.js is how YUI is tested.


After every build, 7,200+ unit tests are executed, per environment.


And they all pass.

So if we have a loosely coupled JavaScript platform for servers and clients that we can build on top of, wouldn't the next step be a framework?

Yes!

Introducing...

Mojito is a JavaScript MVC framework designed to make developing mobile applications easy and efficient.


Mojito is built on top of YUI.


Adds...

Getting Started

// Install mojito
$ npm install -g mojito

// Run some unit tests to insure it installed
$ mojito test

// Create an app
$ mojito create app hello_world
$ cd hello_world

// Create a mojit
$ mojito create mojit myMojit

// file: mojits/myMojit/controller.server.js

// Create the module
YUI.add('myMojit', function(Y, NAME) {
  Y.namespace('mojito.controllers')[NAME] = {
        index: function(ac) {
            ac.done('Hello, world!');
        }
    };
});
// Fire up the server
$ mojito start

// View @ localhost:8666/@myMojit/index

Mojito is great for cross-platform applications.


You get a consistent JavaScript runtime on both the client and the server.


Learn more...

☛ code: https://github.com/yahoo/mojito

☛ docs: http://yhoo.it/mojdoc

Yahoo Query Language

YQL is SQL-like syntax for HTTP.


SELECT {fields}

FROM {table}

WHERE {condition}

Examples

SELECT * FROM weather.forecast WHERE location=90210
SELECT * FROM data.html.cssselect WHERE url="http://yahoo.com" AND css="body a"
SELECT * FROM google.translate WHERE q="Hello" AND target="cs";

Libraries available in most languages

In Node.js...

$ npm install -g yql

In YUI...

YUI().use('yql', function(Y) {
    Y.YQL('SELECT * FROM weather.forecast WHERE location=90210', function(result) {
        // Do something
    });
});

What's the secret sauce? DataTables


DataTables convert YQL queries into one (or many) HTTP requests.


DataTables available for 184 web sites & services. 1,000+ tables in all.


Process data on YQL's servers. Win!

In short, YQL is ridiculously awesome.


More @ developer.yahoo.com/yql/

Conclusion?


Go build awesome things, and use all the same tools we use.


's open-source.

Use a spacebar or arrow keys to navigate