 Good Morgan Anyway, Buenos Aires But you're pregnant Good and talk of course. Yeah, well Thanks for coming and waking up so early. I hope you're enjoying Fosdum And There's my remote I'm Dylan. I work on a project called the digital tool kit and I also am the founder of a company called site pin and I travel a lot and I love what I do Today I want to talk to you about high performance web applications with dojo and it how many of you are familiar with JavaScript All right, how about dojo? okay, awesome and Another toolkit besides dojo All right great So I'm gonna blaze through the dojo stuff and get onto the app stuff. I don't really practice or prepare my talks I just talk about whatever seems interesting at the moment The one thing I would hope you take away from this talk and any other talk is that it's all about choice and freedom with your code So dojo and projects like moutoules and jQuery and whatnot pick what you like pick What works for you and and go with it and I'm just going to expose you to a bunch of different approaches Even when you're using dojo, you could build an application a million different ways so I'm just going to talk about some of the things we do that work for us in various projects and various applications we've built and give you some ideas So very quick history lesson, you know, how many of you were DHTML developers? Very few right. I am proud to say I was a DHTML guy But browsers sucked and you know browsers suck less today than they did back then But the problem was people just didn't take JavaScript very seriously as a language and then Google Mail and Google Maps came out and People woke up and you know the buzzword called Ajax was coined and it suddenly became a real platform With real goals for building products, right? So when we're thinking about You know toolkits. We're actually thinking about how do I give my users the experience they want in an application that matters, right? So I want something that's web delivered why well so everyone can get to it without having to install a bunch of software I want something that I can build cheaply right the whole point of open source software is To build on the collective knowledge of everyone else rather than having to reinvent everything from scratch at least You know it's one goal You want your application to be useful and engaging of course Otherwise you have great technology and a terrible interface and a pointless application will great open source the technology and do something else With your career because the application you're building sucks You want, you know some people have tried to basically create toolkits where they take the entire desktop and bring it to the web That's kind of not the point right because the web gives you so many other things like linking and remixing and Searchability and all of these features and it's not and you know not pixel precise precision But a layout in an application that works in any size screen, you know within reason Obviously if your screen is 10 pixels wide you can't do much with it But the idea is give your give your users the best of both worlds not just you know cloning outlook and putting it on the web So when we set out to build dojo we said alright What's wrong with the world right and at the time this is 2004 and a number of us had worked on other toolkits They still supported Netscape 4 Fortunately, we could say Netscape 4 is dead. We're done with it Hopefully version 2 of dojo can make the same decision about I use 6 and 7 because that would be really nice, right? So I have my own unofficial math and I say we waste billions of dollars a year developing and supporting for I use 6 and 7 So it pays a lot of our paychecks, but at the same time we could be doing a lot more interesting stuff with our money in time so We had we have a bunch of gaps in the browser, right if we look at the things we have to build with they're actually pretty basic You've got an html DOM that has until now with html 5 very boring rudimentary form controls you know like submit buttons that look terrible and and File upload button that you can't style and you just you get really ugly crufty interfaces. So But beyond that like Ajax, right XHMLHP request was a complete hack That was shoved into IE at the last minute because the beta code feeds had passed for IE 5 But XML was cool in a buzzword So I could call it an Xml HTTP request and stick it in and shove it in but the API was terrible and not well thought through So you look at it and it's just it's ugly. So, you know all the toolkits try to make it really clean and simple CSS whether you're manipulating classes or you know trying to just get your Page to start out at the same point and look the same in browsers, you know within reasons So you know setting default rules or whether you're trying to manipulate the CSS object model So add or removing styles from your CSS style sheet. It's just hard to do Dom manipulation, I mean W3C guys mean well, but dude what the fuck is up with your API? I just like get element by ID get elements by class name But then all the things that are missing like give me a query and I mean query selector all is there now But why wasn't that there 10 years ago when people were asking for it every month? JavaScript doesn't have a concept natively of packaging right so require this module It depends on this other module. Why not, you know, um browser vendors have moved at very different rates of speed, right? So Mozilla and Webkit have moved very fast and opera as well relative to IE which doesn't support a lot of things that we expect Awkwardness, you know the language is sometimes too flexible So you you have just so many different ways of doing so many different things and some of them are just slightly subtle And if you're not a JavaScript expert, you can easily go down the wrong path using those So just clean those up a bit and then thinking about the future, right? So dojo has been doing vector graphics for a long time natively using Oddly enough we support SVG canvas VML flash or silverlight and we do that because we want you to have fallback Options for drawing vector graphics, but not be stuck in any one particular environment So browser gaps, right browsers have problems development gaps, right so Tools for browsers and development are way better than they were five years ago Imagine building an application without firebug today, right or without web inspector It's like coding in the dark, which is what we used to do, right? Or, you know, just having Higher-level constructs like give me a chart or give me a grid, right and an HTML table while it is grid Like doesn't give you, you know column resorting or drag and drop or editing of tables It doesn't, you know, there's a spectrum between HTML table and spreadsheet, right? And we all want some subset of features in the middle that would we would call a grid and Finally, I say real development platform, right? So We are real developers or JavaScript people we we can build real applications So give us the tools and the code and the environment that we need JavaScript is so flexible It's so incomplete that we need tools and better options to make it what we needed to be So dojo just started it out as a project where we said we want to get the most out of the web and We started writing code in 2004 In 2005 we started a foundation to host that code because we didn't want it to be copyright Dylan and Alex 2005 we thought that was kind of lame When we came out with zero dot one and zero dot two IBM and AOL and Sun became very interested in dojo which is cool, so they've contributed time and effort over the years and We did a complete rewrite in 2007 because prior to that dojo was really slow and it was called zero dot four for a reason It wasn't ready for primetime production. It was us still figuring out what we wanted to build and Doja became really popular at zero dot four, which is too soon for it to become popular in my opinion Regardless, I mean the Apple store still uses dojo zero dot four on their website Which is I mean it works for them So it's fast enough for what they're using it for but I wouldn't use zero dot four for anything today And so our goal is basically two dot releases a year the forwards compatible They fix bugs they add features etc. And then we're working on a two dot o release sometime probably in 2011 as my guess So dojo has goals right it fixed those things. I was just describing about the browser gaps development gaps Be fast and efficient right performance is what everyone cares about if your application slow You're going to move on to another toolkit or someone's going to tell you to choose silver lighter flex Which is not necessarily faster, of course we want to be Professional and sophisticated and powerful and those are interesting words that I'm choosing you know power meaning give Developers the power to get every last ounce out of the browser You know not just give me the parts that only work in every single browser on the market Let me push the limits and get the most out of this platform. That's really exciting, right? Professional meaning we don't want corporations to have any reason to not choose dojo And we don't want any of our users to get sued for ever using dojo. So we have a a fairly conservative IP approach It's much like the Apache Foundation where basically you have to sign a license agreement that says the code You're giving dojo is yours to give and you're not going to sue for it If someone else uses it and it's important because it protects your rights But a lot of people just don't care and maybe we shouldn't care about we do and so certain companies love that and other people Just don't care at all Obviously we are licensed for adoption, you know, we're BSD and academic free license we intentionally did not choose the GPL because it blocks some companies from using it and GPL is great for certain types of projects for Ajax toolkits We just want everyone to use it in whatever way they want if they don't want to contribute backcode We don't care but most companies and most people do contribute code anyway. So that's great Dojo today is split up into a few levels We're actually kind of reworking that and the names and distinctions really aren't all that important But the idea is that dojo and digit are stable API's They're not going to change from major releases except for additions and bug fixes Which will be noted in the release notes and dojo X is the extensions of the official extensions of the dojo toolkit So dojo.js GZIP will give you pretty much everything you need to build a basic application in 26k And then you can add on any other libraries that you want I'll show you how in a minute digit is both a widget system and a collection of widgets and I'll go through that in a bit as well If you were to work on a dojo application today you probably in your first day would use what's on this screen and Basically, it's just a simple set of API's You'll notice if you've used jQuery before it's structured very differently. This is more traditional yet API's in in our toolkit are fairly flat So you don't see a lot of food up bar dot Baz does is he does is it's not whatever because that's really expensive in Javascript Especially an IE to have object structures that are nested that deeply but you can see we've got packaging stuff We've got stuff to handle loading. We've got stuff to grab nodes set attributes and styles and behaviors creation of nodes Ajax effects caching, you know and hashing so for like back button type stuff Declare for creating classes if the next talk you'll see new tools It's the same thing as doger.clare is basically equal to a new class in with tools Doger.data, which I'll get into in a bit as an advanced topic for application development charting vector graphics You may or may not care about that DTL, that's the Django templating language Reimplemented on the client side so you can use the same template server side and client side and of course accessing the grid the grid is by far the most popular widget and it's not actually an official widget yet because it's so It's so in demand and so under development still so I said JavaScript applications or JavaScript in browsers in general don't have packaging right so we provide a very simple mechanism And what's cool about JavaScript the language is all it actually is Calling a function with a string name You put it at the top of a file and you say this is what I'm giving you and this is what I'm requiring of those modules And then doger behind the scenes just reads that from the file and goes and make sure you have all the dependencies in place in the Right order now when it comes time to ship your application rather than loading in 50 scripts that you need There's a quick build step or a compilation step that will go through and based on how you define How you want your code optimized it'll grab all the files optimize them strip comments out You know stick them into a single file or multiple files and make it really easy to use Probably the biggest thing that people run into when they start getting into JavaScript and are just enough to be dangerous is timing bugs so For example, the classic problem in IE 6 is trying to manipulate the DOM before it's actually loaded And so dojo and other toolkits handle that problem as well DOM manipulation You know, like I've said that the normal API sucks. So dojo, of course gives you a lot of stuff to work with that There's also a little project on Google code called plug D And it actually basically takes most of the jQuery API and wraps it around dojo So if you like jQuery and you want to experiment with dojo grab plug D Use it with that and you get most of your familiar APIs as well. There's also a dojo x.jq experimental module and 1.4 Events so most people when they first start building applications see that, you know, there's on click and there's on Mouse over and on mouse out and your simple DOM events. We take events to a different level We think of DOM events and function-to-function calls as basically the same thing So basically you connect one source object and source function to another target object and a target function And we do that because then we can just simply think of it all as the same thing One thing you'll notice if you're not familiar with JavaScript is that the name of the function is actually in quotes And that's because while JavaScript is a very dynamic language in a dot-dot-dot-dot-dot syntax The last thing in your list has to be the actual name. It can't be a variable representation Unless you put it in brackets and if you put it in brackets then it could be a variable name So if we pass a string in so we couldn't just pass in object 1.foo Because it would be looking for something that was actually named object 1.foo when we call it inside our our private method So that's what we do Dojo also supports a pub sub model So if you want to publish your subscribe to a collection of topics, they're just named topics Most people follow a sort of URL style pathing mechanism much like mod pub sub or Jetty Comet D that model so if you use some well, you know, how many of you know what Comet is Okay, a few of you Comet is Ajax, but faster and actually the ape guys are back there and they have a Comet server or an Ajax push engine or an async push engine, whatever you want to call it But there's a number of different approaches you can take to that one of them is a pub sub model and dojo supports that Ajax is much simpler. I'm just gonna leave it at that. I've got too many slides as always We have a nice effect system. Those weren't actual dojo effects, but I'm just trying to illustrate the point Dragon drop support of course Some newer browsers are starting to support it in certain ways dragon drop is actually a really hard problem to solve Because everyone wants it to behave differently So in addition to providing some good defaults, we provide very nice extension points throughout the dragon drop process So you can rewrite how you handle drag events and how you actually Display what happens when someone's dragging that sort of thing We a lot of toolkits of course followed this but IBM was a big contributor to dojo and IBM works with a lot of large agencies We're accessibility and internationalization are key So dojo has made a huge investment in making sure all of our widgets are fully accessible through keyboard blindness color blindness You know just you know inverted screen colors all that sort of stuff as well as very localizable So we have translations and a bunch of different languages a very simple way to provide your own translations for your own widgets, etc does your not declare so JavaScript has classes sort of you know, it's a prototypal inheritance based language With some class constructs bolted on top and so but the the syntax to do that is actually pretty ugly So toolkits try to make it really easy So you just say does that declare the name of the class you want to define the things that it inherits from The first one being the one it it strictly inherits from and all the subsequent ones being things that are mixed in So mixed in meaning you basically copy the methods and properties and push them on and print them on top of your existing function and then you can have a constructor and then just a number of parameters as variables or objects in the form of functions So digit why a widget system, right? So a lot of people use dojo for its widget system In fact like in my recent survey of why people use dojo based on what people use dojo for on the public web Every site I could find uses digit as well as dojo so the the cool thing about digit compared compared to like EXT's widget system per se is that dojo has always really been about a system to build your own widgets easily and We give you a bunch of nice ones out of the box But we're more concerned with actually giving you a platform for easily building your own widgets or extending the existing ones So they're very themeable It's very they're very consistent in the API across all the widgets So it wasn't the case, you know three years ago, but that's that's the case now And the thing is we want people to be able to think okay. I've got a tree and I've got a grid Well, don't use trees because I hate them But you know if you like trees you got a tree you got a grid you got a chart, right? But you know still under the hood it's still just dom nodes some HTML that you know code to put those into the page Some CSS to style them and some JavaScript to define the basic behaviors of that So all of our widgets are basically an HTML file CSS file in a JavaScript file And we do a lot of nice things to encapsulate the behavior so that you can have multiple widgets instances on a page And not worry about ID collisions or naming collisions and that sort of thing I Think I already talked about that so I'll skip that lots of features lots of themes we're actually working on two new themes right now for the one five release one of them is actually a port of the Cappuccino projects open-sourced Aristo theme So we'll call it Aristo Joe because everything has to have that Joe at the end I actually have a Jojo project. That's a spoof of jQuery and a mojo project It's a spoof of Mootools and and whatnot. Anyway that version because I like to just stray We you know you could classify our widgets in a number of ways We've got things to do layout so you can do desktop style layout You know what the app to take up 100% of the screen have this much take 30% include a splitter that sort of thing Form controls that replace the default ones and give you things that are much better You know like calendar controls that sort of thing How many of you have ever tried to build a WYSIWYG editor on your own? How many of you want to shoot yourself in the head after you were done? Keep them up It's just it's a an exercise of futility because it's one of the few things we're in an Explorer for a while or and maybe even Today has the best API But I will say that it was probably created with the intent of making it possible to think you could recreate word But not quite so every boss wants you to say well, this doesn't behave like Microsoft Word What's wrong with this editor and everyone else copied the API to basically make it also not possible to recreate word in the browser And so it's this terrible exercise of futility and there's there's good projects out there The digit editor is pretty good and there's other editors out there I think there's actually two editors in dojo because one is iframe based and one's not iframe based and that has impact on back button events and Other things and it's it's interesting. There's a lot of widgets. I Got interested in dojo because I was very interested in vector graphics I actually got interested in JavaScript because I was a physical Chemist graduate student UCLA and I was studying the topology and rheology of quasi two-dimensional foam So if you're sitting looking at your beer tonight, and you've got bubbles moving around I was studying the physics of that which is really cool And I wanted to put that on the web I wanted to be able to draw that and show people what that meant like why why would I care? And it's actually really interesting science that I won't go into because I don't want you to fall asleep And it makes me fall asleep pretty quickly too, but I got hooked This is like 97 and of course you couldn't do anything like that in the browser Not even not with anything except maybe an applet, which was just terrible, but I got hooked on JavaScript so For me native vector graphic support is key You know I got and the way I really got into open source was Adobe killed the SVG viewer project when they bought macro media So I had a nice SVG viewer that would let me do this stuff And then they they killed the project and it took years before native browser capabilities caught up So at dojo that's been a major driving force for me in my interest in dojo early on Again, we just try and do stuff that you know People say can't be done and we try and find a way to do it and what's cool is within a couple years We've got it done and it works well and other people do as well And it's not like we're the only people that experiment, but it's a big driving force for dojo So dojo also includes a lot of tools And most people don't know about these but they work with any JavaScript code and in fact There's a lot of overlap between our tools and other projects tools Of course, everyone has to write their own tools because they don't know about other people's tools You know, we just kind of sit tunnel vision and just think about our own stuff Which is what's great coming to conferences and talking to people from other projects I keep pointing to mr. Mootools over here not the founder and and of course the founder of Lario somewhere in the audience I don't know where he is, but anyway Lots of cool tools to do things better You know to generate documentation on the fly for your source code and dojo source code to do unit testing Run thousands of unit tests the browser to do continuous integration testing functional testing by Writing your own tests and pulling selenium or windmill into the fixture that sort of thing So applications with dojo, right So we have a lot of goals related to performance to get our applications working fast enough in browsers HTTP request simplification no timing bugs small code size optimize optimize optimize people come to us all the time saying How do I make my app faster as fast tonight six as it is in safari? We chuckle we say what do you really want to do? What's the reasonable amount of time? We look at the code we find the bugs and we fix them But sometimes the most benign things can cause a second delay in i6 or i7 or even Firefox And so a lot you just have to use the tools look at the data find the bugs fix them But you know there are things you can do to structure your application to make it easier, right so People often make a decision okay I'm gonna do a single page app because I want everything there I want to pull stuff in and then the app becomes so large that it takes 10 seconds for the page to load Well, it kind of defeats the purpose of giving people a fast experience by having it all there But making it take forever to load at that point you might as well split it up So what you can do is you can grab code pull it in as needed So so you've got an email client with a calendar and an address book and an im client, right? So you might start by just having the mail client load And then when people click on calendar you grab the calendar code and shove it into the page And then when people click on the im client you might load that and the reason for that is you can optimize based on use usage patterns So maybe 80% of your users use email 20% use the calendar 30% use the im clients So you can optimize based on on behavior Of course you can optimize on on feature loading as well Which is sort of I was just talking about but it's basically have like an initial loading step some pre-fetching of stuff You expect them to use after the application is already responsive Logical caching of things so another approach you can take is here's my dojo code, which is stable Here's my digit code, which is also stable, but I may pull in other digits later Here's my custom code that's stable and here's my custom code that's changing every day And so you might build those into four separate layers So the first three get cashed more aggressively than the fourth one, which you're changing every day Larger sites are starting to use statistical analysis. It's basically each week They update their optimization strategy or even it every day maybe based on how people are actually using the site So if you look at a large site like Facebook, you'll notice it's constantly changing It's constantly getting faster and I guarantee that one of the ways they're doing that is they're looking at usage patterns for users Well, obviously usage for users, right and I'm pulling in what's needed and what's not needed and then Dynamically changing how that happens over time You might also think about how to like, you know, there's the classic Microsoft problem Or I think they invented it, but you know, there's one of those interview question problems You've got like something that takes one minute to get across the river two minutes five minutes and ten minutes And how do you get all four of those across if you've got one robot that can seat two people at a time And the key is to like put like things together, right? So if you think about it like, you know, delay your media get your initial DOM in place Then go grab your media then grab certain things Think about how Frequently things need to update and just sort of structure them in logical ways So what are some of the approaches we take? Well, I keep talking about builds and compilation and all that means is we're going to take a bunch of JavaScript files and shove them together to reduce the number of requests And we're going to do it in a very logical way And what it does is that solves a lot of timing bugs because of course all your stuff is in one file now and you're not doing stuff that's stupid One more point and of course moving stuff to CDNs, right? So pretty much any of the major JavaScript toolkits you can get off the Google APIs page So if you just want to use Dojo or parts of Dojo, you can just point to the Google APIs link or actually there's an AOL one also And the nice thing is it's just cached so if you and you and you write an application and you all use the same Dojo and your users go to all three applications They don't have to reload it three times if they're caching us so logically I talked about that already so I'll skip that One thing we're actually working on is so I've been talking a lot about builds and you know having to do this in advance And that's kind of annoying because it kind of defeats the purpose of just being able to write and go You know we'd love it if the web was just smart enough to handle this So some of our clients And when I say clients I mean site pen when I'm talking about toolkit I mean Dojo So I'm not doing a good job of switching hats but whatever Some of our clients have thousands of different configurations because each client might pay for different features in the software And imagine trying to test and optimize and make sure thousands of different configurations were working at once So it's gotten to a point where we need basically a dynamic build system So basically you just define a URL that you call that's the list of the modules you need And the server will build it on the fly if it's already built it just grabs the cached version And if it's not then it builds it and it needs to be like sub second to do that And we have a working version of that that we are probably going to open source in the next month or so We're working on modules for Apache a Python module for Google App Engine and something for Persevere as well You know thinking about sync versus async I have this weird theory that everything is both sync and async depending on the time scale you look at So if you look on a small enough time scale something synchronous if you look on a large enough time scale It's asynchronous but when you're writing your application code you should be thinking of everything as asynchronous So that you can always not block based on that behavior There's a lot of different ways to optimize based on that I'm a little short on time so I'm going to keep going Sorry there are Steve Souters wrote a couple of excellent books High performance websites and even faster websites they're very good But there's basically multiple ways to include your script in a page and they all have different trade-offs And some of them work in different browsers in different ways And he has a decision tree based on what you're trying to do on which technique to use Yeah I don't need to go into that But you know one of the reasons Ajax became popular was oh my god there's this concept that you don't have to reload the page every time the user does something And of course we had known that from the days of JavaScript and we had done user behavior but we hadn't really said Or I can load new data or I can load new components or I can do form posts in the background and get stuff back And that's what Ajax and what Comet are for is to optimize that user experience I went to a talk about JSF, does anyone here like JSF? No good I don't either, not that people don't use it with Dojo and enjoy it but it's not my cup of tea or whatever Forte or whatever you want to say The point is I went to a talk in 2004 from Craig McClanahan and we said he was giving this great presentation with the Typical Amazon store demo with JSF and it was really awesome and we asked two really dickish questions One does it scale and two what if you just want to reload part of the page And the answer for scaling was well it scales to hundreds of users and everyone laughed because he's showing Amazon right it's got millions of users And then the other thing was can you just reload part of the page and he said that's an area that's ripe for innovation So we knew we were on the right track because he didn't have an answer for it Now of course JSF the latest version does have an answer for it but at the time it was like wow the world's thinking about these technologies And they're not thinking about how to just improve the user experience and make things faster in the background Now Comet is interesting it's been around in some form since the late 90s And the idea is it's a collection of techniques and protocols to allow you to push data directly from the server to the browser Or give that type of responsiveness in the form of long polling or faster than just normal Ajax requests Obviously I'm big on code size and maintainability there's a lot of different approaches you can take Obviously we've talked about building optimizing crunching patterns I don't know why I said to see the talk on Friday morning Because I forgot to update this slide yeah I have a talk online that actually with Aaron Newton Comparing dojo and mootools for patterns and I think it's on Aaron's site you can find it if not email me Or tweet me or Facebook me or whatever We're big into kernel patterns we're big into restful approaches and but we also offer RPC style approaches as well Dojo has a thing called dojo.ready basically the idea is if you're going to do anything that requires the DOM Wrap it in a dojo ready block before instead of just putting it straight in your source code And that way it doesn't get called until the DOM is ready in the browser You can actually also recursively nest dojo.ready calls So basically when the top level stuff is done the next level down will get called and subsequently So it's a nice way to require different layers on the flyer or pull other code in as needed Anytime you're building a big application especially a single page application You probably want to use a kernel style pattern I mean people may call it something else But the idea is that you want to have a lot of configuration options Perhaps maybe based on a user load their settings load which modules are going to show on a page Maybe their preferences for how the application is laid out that sort of thing You shove it all into a kernel and it's generally just a simple little pattern You know basically before the page is loaded do some stuff which we call pre-parse And then parse the page and by parsing the page what we mean is with just normal HTML You can define widgets or digits in your page just to mark up with some custom attributes Which works in every browser but it breaks the validator but I don't care And we can debate that some other time because I'm talking I'm just kidding obviously But then basically parse the page and convert normal HTML nodes Upgrade them to digits and then do something with them afterwards And that's the simple part of the pattern And so you just connect the kernel to a pre-parse call and then do something with it And then you just load in like for example here's a kernel and it's got a user ID And some features and a foo variable set to bar It's a nice simple pattern. A lot of people probably use it without really realizing it But we use it in a pretty extreme way It is a nice place to shove stuff. Some people might say it's really bad to just shove everything into a kernel I would say it's better than shoving everything into the global namespace Because you'll forget and then you'll want to mash up with something else And then you'll have script errors and kind of forget why they're there Or other people in your company will work on other parts of the application Use the same global variable and you'll hate each other for life Rest, how many of you are familiar with rest? Okay everyone I don't need to go into that But you get the idea. It's just your standard methods The cool thing is if you take rest and you take JSON And you take a few other services You can basically think of the entire internet as a database that you can use in your application So this is a hideous slide on purpose This is the common architecture or a set of architectures you could use to build a dojo application And the cool thing is all you're really writing is a little bit of code in the original top left And a data API to access your code And instantiating some widgets And then basically you can use our concept of data stores And your own data services based on whichever approach you want to take Load them over a transport to your server side code If you want you can try and sandbox them in a way that will work in a portal But the cool thing is you're just worried about that little part up there And then whoever's working on the server side is worried about that little part down here And suddenly you can basically access data of any kind of any form And put it into any style user interface you want with not much effort Just cool So restful architectures recommend separating the UI and the data So of course what we're saying here is in this architecture is that the UI is concerned about the UI And now some people have taken the opposite approach saying the server should still care about the UI And reverse that relationship, we don't So how do you do that? There's a lot of options On the client side you can use Dojo or Persevere or other toolkits if they have an extension for data or restful architectures On the server side you can use Spring or Persevere or CouchDB or one of the common JS compliance servers Or you can use AAPE or a number of other things Persevere is another Dojo foundation project, I'll focus on that since you're going to talk a little bit about AAPE And basically the idea is anything you can imagine doing in XML or with databases you can do in JSON Whether it's grabbing data, pathing it, querying it, referencing it, writing schemas or hyper schemas So it's very cool You can take JSON and start to manage cyclical relationships, multiple references, cross-site references You can say in my structure of data this particular object actually points to the search results for this tag from Google Which is kind of cool Data backed objects, right? So the idea of Dojo.data is that basically you've got any data source And you've got widgets that all want to speak to just one API set So basically you have just a very simple API on the client side It goes through a small translation layer which is basically called a data store implementation over some protocol to your data source And you can use it, very nice, the cool thing is say you've got one data source, right? And say it represents stock quotes, okay? So you could have in your page a grid and a chart, right? And the grid and the chart could talk to the same live data source So then you've got a chart of all the stock quotes and it's changing numbers And then you've got a set of charts that are going like this now The reality is financial markets don't move that quickly but it would be cool if they did And it makes a cool demo when you create fake data that does that So data can come available in almost any form, right? So the idea is that Dojo is built a whole number of ways Whether you just have data shoved into your HTML page, a CSV file, JSON formatted, XML formatted People have soap extensions, I don't like soap, but in browser But some people have a real need for it, especially if they're doing like a desktop stylification in the browser You've got dynamic sources, right? You've got a program on the server running and generating dynamic data for you on the fly, that sort of thing Flickr, Google, Pothkasa, Facebook, any other data source you can imagine wanting to pull into your application Doing it easily and simply I've sort of said that, skip Dojo has something like 60 or 70 existing data stores and there's a lot more out there They're very easy to write and we're actually working on an even simpler one for Dojo 1.5 Called just an object store But again, the idea is that you've got basically four simple things Read, notification, identify, and write We're actually thinking maybe we should just change it to get, put, and post But we'll see The idea is you've got all your widgets, you've got a simple API And then you've got your stores which tell the APIs how to grab that data, update it, cache it How to edit it, update it, read, write, et cetera There's a lot more So, you know, if you want to have code that, your data follows a particular schema You can get Jason's schema If you want to do full, did I turn myself off? Well, volume, great Okay, if you want to do an RPC style approach So one application we had had like a meg of basically get and set methods of various properties It was basically imagine trying to work with ad network APIs You know, to set like quotes and bids and pricing and all of that Well, we took that and we changed it to just Jason RPC style approach Where we just sent a file listing the methods and properties and parameters that were available And we dropped a meg of code down to like 100k or 50k or something really small The idea is that you can generate all of those get and set methods on the fly When you need them only CommonJS has become very important for dojo and persevere and other projects And we're working on that as well There's a project called RequireJS that would sort of work with their module system That would work with dojo as well We're seeing JavaScript emerge as a true server-side programming language So you can use JavaScript anywhere, which is really awesome I mean, it's either completely scary or completely awesome I obviously think it's awesome because I like scary stuff But, you know, imagine writing JavaScript on the server, on the client, on your mobile device Everywhere And you might say, well, why not Python or why not Perl or why not Ruby What's happened is JavaScript is so well tested for manipulating the DOM and browsers That re-implementing that in another language is just not worth the investment for most browser vendors And the server-side implementations are actually becoming so fast They're faster than the Python implementations in most cases So it's pretty amazing that JavaScript has become this From this completely bastardized, unowned language to the world's leading most popular programming language in just a decade Quickly, people ask who uses dojo A lot of people use dojo in the public Way more people use it in private So dojo is often used for internet applications, software people buy, air applications, etc Obviously, the Chandler project, when it finally released, used dojo for the web UI DCTP is a German TV channel that does live video and uses dojo for the interface ESRI is the world's leading map technology provider Pretty much, if you've ever used mapping software, ESRI is somewhere in that stack And they use dojo for their Ajax APIs, and they have cool things like not just maps, but also demographic information So you can pull in and say, okay, in this location, how many French restaurants are in this two kilometer radius And it might help you decide where to open your French restaurant Or is this a good place to go to eat, that sort of thing But all using dojo widgets and data IFI, I don't know if it's available worldwide, but it's available in the UK and the US at least It's basically a SD RAM card with a little Wi-Fi chip built into it So basically, once you configure it, you can basically take pictures And once you're in proximity of any Wi-Fi network that you've configured it for The photos upload automatically to your computer or Facebook or Flickr or whatever Network services you've set up And they use dojo for the configuration and installation with wizard, which is really cool Fidelity is a very large broker, stockbroker, especially in the US And they pride themselves on being the leader in technology in that space And basically they have dojo down to like a 6K initial load That way they show up as still the fastest website for building applications Or you know, for delivering stock quote data And then they highly optimize it based on exactly the modules they needed at a certain time Lufthansa is a cool airline, obviously you see a flash block in place So they messed up there, but they use dojo on their site, which I like Plaxo Pulse, you know, a lot of people don't use this, but I kind of like it It's kind of like an early version of Friend Feed, you know, just pulls in data from different places It uses dojo Qued if you're in America, we have a service called Netflix Netflix is really awesome, basically you get movies on demand or you get DVDs sent to you But their web interface for choosing the order you receive movies is really poor So there's application called Qued, helps you redefine the order of your Q really quickly And it's really nice, but it's an error application, which is really nice So it's a download, so you get an icon So you can actually get the best of both worlds in that case By using your web technology, development experience Using Safari, I'm sorry, WebKit as the rendering environment Shove it all into an error application and people can download it And thousands of people use this, and we don't actually put much into it, so it's pretty cool Sonoracle has a product called Convergence, basically it's their email application Obviously we've probably built like half a dozen email applications for different companies This one just uses a lot of stuff And before this, it was like a web app for this, a download for that, and a Web 1.0 version for this So we helped them do that Openness, Dojo is a true 100 point open source project As I believe Mootools is as well But I would have to verify that, I don't know But basically it's the definition DNLmire of a Jackson came up with Which is basically like, not only is it open, but is it open for me to use? Can I be involved as a contributor, or does one company own the rights to who can contribute? That sort of thing Lots of people use Dojo obviously We're always looking for help People may have this perception that we're this big corporate entity No, we just have a few large companies that contribute developers as well So we're always looking for help in almost any way, shape, or form The future of Dojo, I've talked about it a little bit But basically lots of edge of web development, lots of enhancements More work on map and performance, performance, performance, performance Easier to use APIs, etc. Obligatory plug for SitePen, we build web apps If you ever need help with Dojo or your web app in general, you can call us There's an online Dojo conference next week You can sign up for it, it's not free, but a lot of the proceeds go to Dojo itself Here's some interesting and useful links Obviously there's a lot of Twitter stuff at the bottom, because people use that now And of course there's this email thing that I still use too So thanks, and I have a question and answer policy Which is you get one sentence to answer your question, and I answer it in one sentence So I am ready for questions Yes, what about offline? So currently for offline capabilities we support Gears, which may be dying We support the HTML5 model, which isn't quite there, but it's close And that's our approach Basically we support whatever the browser can give us People can and do build offline applications with Dojo So Dojo actually, that's way more than one sentence I'll shut up, unless there's another question I forgot my own rule, all right Who's next? Yes Is there a steep learning curve? No, it is steeper than something that's smaller So Dojo is a comprehensive toolkit One sentence Can I ask anything and I'll give any sort of answer I feel like Yes When do we drop IE6 support? Preferably the idea is that 1.x will have it, and 2.x will not And 2.x will come out in 2011 There's one up there I'm sorry, I couldn't hear the last word EXTJS? Yes, what do I think about EXTJS? I think they have some amazingly lovely widgets And I hate their licensing All right, thanks