 Feel free these front tables. These guys are cool, too Sure, we all want to be friends and feel free if you want to code along with some of this I don't think I linked this on github yet, but I'll link it as soon as I get off the stage here I'm gonna be live coding small pieces of these applications Because we're pressed for time and I couldn't code the whole thing in 90 minutes, but feel free to follow along At home still a little early, but you guys just want to get started Yeah, cool cool. All right So really quickly before we get started a little bit about myself Welcome to jQuery first right first ever jQuery India conference, which is pretty sweet. I'm pretty excited to be here I know all the other speakers are pretty stoked to be in India possibly for the first time My name is Alexis a brail. I work for a company called beto V We basically are a small Consulting firm specializing in front-end JavaScript of elements. So you may not have heard of us and I may not I mean, I don't think anybody has But you've definitely seen our work We do a couple things one typically when larger corporations like Walmart or Sam's Club T-Mobile, etc Have a large project you need to undertake Maybe they need to bring a team internal team up to speed they need some additional training some additional tools Or they just need us to do that application for them. We're one of those small companies that fit into that niche There's a few of us in the space, but the space is large enough We technically don't even compete with each other, which is a really nice area to be in But we basically just do consulting to keep the lights on Because we have to pay the bills But what we primarily do what we like to do is we have a set of open-source tools But Toby's been around for a little over nine years So we've been doing consulting for almost a decade not quite yet And these are a set of open-source tools. Let me scroll down a little bit That we've built over the past decade that helps us deliver Large maintainable applications as quickly as possible So one of the tools I'm going to talk about today is can JS Because you can build the application you need to it was a really kind of fun little marketing segment when we launched this a while back But this is what we're gonna be talking about today. This is an MV framework I'm not gonna say if it's MVC MVVM. It's MV whatever you want it to be. It's a very modular approach I'm gonna show you how we build things internally of the tovi and you're gonna see a little bit of the API today I don't want to go too in-depth with all the API bits because that's basically just reading a dictionary at that point But hopefully it excites a little bit to go out and build fun projects of your own just to start out Maybe a client or a corporate projects in the future so We're gonna talk about What this is from a practical standpoint. There's a lot of Fun little side projects fun the laps out there that you can build with different frameworks And there's a ton of different frameworks out there But I want to emphasize a couple things When we get into this even before we start Don't use can JS because I'm up here telling you to or because you think it's exciting after you see this presentation I would say don't use anybody's framework based on what somebody else tells you the guys in the workshop heard some similar notes yesterday as well Educate yourself about the tools can JS angular ember. These are just tools for you to help build your applications Use the right tool for the job kind of mentality see what tools fit your team, but Educate yourself about the tools as many times I get to a client's office They say we need to rewrite this application in X framework or with X tools and I could start off like a technology debate But I tell I try not to debate I instead instead I'll turn to that person and just ask why Nine times out of ten they are silent at that point I have no idea why because the museum tells us even if you're South Park fans But it's this arbitrary reason because X Superstar said it on Y blog And that's why we're gonna base our whole tech stack on this framework that we've never used before So like I said don't even use this because I say to you but check it out for yourself Getting into this this is our kind of Tag moniker. It's just a very modular set of tools to help you build your applications specifically from an architecture perspective When I say applications, I'm talking about the front end specifically in the browser. Oh That is looking weird. There we go When you hear the MV pattern if you're familiar with MVC MVVM MVP, etc We're basically just talking about a separation of concerns Regardless of how you separate these out into view models models, etc You're gonna have really three large layers. This is true This is it says nothing to do with UI or server side code It's just where do you put your concerns when you're building your application? typically you'll have some kind of presentation logic this could be in the You know HTML how things are represented it could be if you're on the server side How you're representing your restful services or your socket endpoints what those signatures and APIs look like You have some kind of logic layer and this could be multiple sub layers within your logic layer But this is where the business decisions these code specific to whatever your application is building resides and Typically you have some sort of data layer. This is protecting data access or massaging data Serializing deserializing data into specific types and formats before it gets to wherever the data is trying to go Maybe it's trying to go to a database if it's on the UI Maybe it's just trying to go to a restful request. You want to say hey all rest requests for this Service need to be in this format. You would want that logic in some data layer That way any new features you build are already set up to use that same pipe Does that make sense from like a really abstract architectural standpoint? So when we're talking about this pattern, we're gonna break things up into this kind of a layer the question comes up frequently why another MV framework and I agree completely. I have no idea why there's so many others If you remember way back in the day, how many of you here wrote GWT? Anybody yeah couple. Yeah, those the hots at one point in time We released JavaScript MVC, which is the parent kind of project in late 2007 We've been around quite a while originally the parts Originally the part of project JavaScript MVC Very old. We were able to get the name JavaScript and MVC the two most general terms and the industry in terms of how we're building these tools but the core project with this architecture tool set was called jQuery MX jQuery with MVC extensions Fast-forward a little bit around 2010. We started to realize We love using jQuery internally, but we don't need to be married to it necessarily if you're using dojo or YUI or Mootools or Zepto you should be able to have the same type of architecture tool set as well. So in 2012 We released KANJS, which is just a port of jQuery MX But without the jQuery the hard jQuery dependency now all the examples you will see today We'll be using KANJS and jQuery read jQuery conference. I wouldn't want to make it weird, but you can use it with anything We're dropping YUI support in the next release for obvious reasons why you I no longer exists so This is just a little graph showing where we came from where we're headed to we've been around quite a while and hopefully We're not going anywhere anytime soon The core of what I want to talk about today is building rich applications Because this is hard if your manager comes to you and says hey We need to build Gmail That's a little bit overwhelming. I've been doing this for a little while now And to me that would be overwhelming. Yeah, it's a good song. She's like keep playing It's overwhelming there's a lot going on if I said can you build Gmail and give me a time for him You can build it. I wouldn't have no idea what to say but if I said well Can you give me some kind of widget where I type into a text box and it shows a div below it with more strings? Okay, I think I can figure that out Well, maybe if you type into the text box it makes an Ajax request and the response Populates that div with some strings. I think I can do that if you click a checkbox on a row It changes the background color of a row Okay, I think I can do that you want to break your application into small reusable modules So that you can build your components to building Gmail if that's the example you wanted to build The secrets to building large applications is don't build large applications small Reusable modules that you can build and piece together to build something complex The second thing I want to stress We're very tied To this concept of how things look in the browser. We're very concerned about that We love making you know, whatever logic we're doing. We'll say hey Dollar div dot html changes divs html on the fly and that could be in any layer will make that kind of modification I Consider that the same if you've heard the term ad hoc database requests I kind of consider that in the same line to where you could Technically modify anything in the database from any layer on the server side, but there's reasons you do or don't Maintainability is one of them So when I think about building an application if this is our application here if I get some Design from your design department some kind of wireframe or mock-up. I think about what is the state of this application in memory? How does this look like as an object in memory? I'm gonna show you how I kind of the thought process behind this So here's a simple application Where you pick a restaurant from some geographical location some state and city it'll give me a list of restaurants And I want to order some food, but I'm gonna focus on this one screen here Here we have a simple page with two drop-downs It looks like the first drop-down is loading Maybe it's making some kind of age X request for all the states You can order rest list restaurants from and the city has a drop-down, but it looks like it's disabled Maybe until you choose a state that probably makes sense So you choose the age X request is completed. It says choose state. I assume that below choose state There's a list of states that we can select from Looks like there is so we got some information back from some service. If you choose the state It's gonna make another age X request. It looks like for probably a list of all the cities that these restaurants are in in the state of Illinois So that age X request is completed We get two cities Chicago and Peoria you select the city And it looks like at that point once you select the city then it's gonna show you the restaurants available in that region So conceptually a fairly simple app But how do you manage this in behind the scenes immediately? We're thinking of how do we populate this? Select how do we put the options into that input? How do we you know, maybe we want an unordered list with some styled allies to think about this bottom grid? That's immediately where we're you know, we're UI developers. That's where our minds go first I try to think of just managing an object in memory. This is why oh If you change the state, I forgot one use case here change the state We should probably wipe out the cities make a new request for whatever cities are in Wisconsin now and start the process over I Focus on maintaining state behind the scenes of the UI as opposed to modifying the interface itself For two reasons one It makes my applications more testable The UI the presentation layer in my opinion should just be something that responds to a state change So if I change a property on an object if you have a person object and that person has a name property If I change the name on that object if it's represented in the view something should be activated Some other tools should be changing that for me. I don't have to go to every div where that name was used myself And try to figure out what's going on does that make sense? It kind of turns into the handshake problem if you're tight coupling Logic bits to pieces in the DOM you're gonna say hey, how many places does this piece of information get used then? Let me make sure I modify all those places if you remove one of those places Maybe it's just a silent thing if you say dollar div HTML jquery's and say there's no dibs with there's nothing that matches your selector I will quietly do nothing Maybe it's more complex and your application throws an error either way You probably don't want to be making that modification anyways. You really only cared about changing the name of the object everything else is ancillary so Looking at this application a second time. I break this down as follows So here on the blow part is kind of just what I think of in my head How we kind of approach designing our applications from a code perspective from an architecture perspective If I see something like this, I'm gonna have some object in memory that says hey, maybe we're gonna have a list of states This is an Ajax request So I would have some kind of promise object we're using jquery maybe jquery deferred Something that says I'm gonna request data from somewhere and I will eventually resolve to something What it resolves to perhaps an array of states a list structure of a list of states If you select a state Perhaps you have some string. Maybe it's just a string with the actual state name that you're setting Maybe setting this string actually setting of the string is what invokes the second Ajax request cities is another Promise because we're gonna request the list of cities for the state So that's another promise that will resolve to this array Maybe the city itself is just another string as well whatever city you happen to choose Perhaps if you've chosen the state and the city, this is what triggers the actual request for the restaurants available in that region So in that case Restaurants will be another promise because it's an Ajax request which will resolve to a list of restaurants Now if you look at just the below part just the object This is something we can create and test without even building a UI without modifying any DOM We can test the business logic way way earlier a Lot of times we get requests. Hey, I'm not seeing this div show up or the H1 doesn't have the correct value The error is usually happened before that point typically it's sometimes it's a typo in the view But usually it's something logical beforehand that has gone wrong any musicians in the room by chance None. Oh one. Thank you. Sweet. I was gonna leave me alone out here So I taught music for a while in my younger days And when I was a student in music, it's a great piece of advice from a jazz instructor in college and We were messing up the song and we kept practicing the same area of the piece over and over and over trying to get it Right and we always played it really well But when we put the song together it would always just bomb at that section We could not figure out why the professor came up and said no no no the place where that's just the symptom You're observing that that an error is happening here. The mistake actually happened four measures before it That's where you got off. This is just where everybody notices it I find that's true in a lot of life situations Programming included by the time you're seeing the error. That's not necessarily where the bug is That's just your observation of what's going on. The real problem has happened to somewhere else Does that make sense? So it makes debugging kind of fun in software engineering. So I basically start with this Um Before I go any further I'm gonna get here. Yeah, I'm about to build this but we're gonna build a couple things today I don't like making slides. I prefer live coding. I like to be a more interactive so you can see what we're actually doing These are all fun words that I'm saying let's get to the code As a side project This is something we built for the local community in Dallas But I think we're on the same subnet if you can see my IP address there 10 5 9 25 port 8000 feel free to go to that address right now if you're on the same Wi-Fi you should be able to access it This is a very simple can JS application Hopefully if we have enough time at the end of this maybe after the intermission we might have enough time We are gonna live code this entire UI From scratch but in the meantime. Yeah, it's like something right here This is a pretty small application with a couple of our approach on web components two components are in this application and It's just a simple chat application that will send a message to some server that I currently have running on this machine It will respond if you have a socket enabled browser, which if everybody's using Chrome, you're good at this point And we can communicate with each other. So feel free to check this out while we're going Let me squeeze that down to where it fits on the screen So if you enter, it's just a pretty rudimentary little chat application Not much in terms of complexity, but I'm gonna show you how we built that too okay so Can JS Let's build our little restaurant application. Well, maybe you put that phone on silent What's that? Oh, we're not on the same subnet. Oh, it's a bummer I guess I'm on a different Sorry guys That's probably because I'm hooked up to the hotel Wi-Fi not the jQuery router. It's probably what it is. All right. No worries I'll give you guys a code for this anyways. Ah I'm debating which part to show you first. Let me show you The restaurant Let's do that first. I think that makes sense Let me fire up a local web server here and most of this application is built But I believe I deleted. Yeah, I'm gonna delete this part Actually, I'm gonna leave this whole file So I have a local server running with that restaurant application There we go Open up my console here And right now this is two selects one disabled one that does absolutely nothing A lot of times this is where I'll start I'll put some static markup on the page And I basically add attributes to bring things to life I'm going to show you the attributes I added in the presentation layer But I'm actually going to build up the object first before we even test this kind of stuff. So Remembering before in pseudocode. I'm basically just to list out what we need to do We need some kind of construct that has the attributes that we listed a moment ago So states we're going to want some kind of promise That resolves to an array of states A singular state which will just be some string We're going to have cities Which will be another promise we're going to make a request as soon as the state is selected And city Which will just be the string of the city you've actually selected Finally restaurants restaurants if I could spell Will be another promise Resolving to an array of the actual restaurants available in that region So far so good. Okay. Here's a little bit of the api. I'm going to write this in es6 Because you just had an es6 talk before lunch. So I figured it's fitting so If you have questions about how I'm making this work I feel free to ask those. It's kind of off the canjs road, but it's still in the family of products But I'm going to say I want to import can's core. So I'm going to import can from can I'm going to import can map define canjs operates. Obviously Uh, we're very jQuery influenced and how we develop canjs You can treat these kind of plugins that I'm using here similar to how you treat a jQuery plugin You need to import it and this plugin will modify canjs itself somehow giving it functionality Same way if you import a jQuery plugin, it's going to add a function to the jQuery prototype Make sense cool What i'm going to do here is basically define a fancy object So with canjs, we're huge fans or epitome in general We're huge fans of the observable pattern. Is everyone familiar with the observable Observable pattern the observe bubble bubble pattern We're basically talking about how do we communicate between two modules loosely coupled That's basically the whole purpose of this pattern so Before we can implement that pattern we need some kind of observable entity some object that we can listen for changes on In canjs, we have something called maps So i'm going to say uh var This is just a view model for what we're doing. So i'm going to call it vm because i'm not original I'm going to say can map dot extend If you've seen backbone before you're probably familiar with the extend method. This is very similar to just saying public class vm inherits from can map If you're from a java background, that's basically all we're saying here. We don't have that syntax. So we type things like this Uh But map is just a simple object that you can listen for changes upon. That's all maps are cool sweet What the define plugin gives us define Is it gives us the ability to define behaviors on attributes? things like how an attribute is uh get or set getters and setters How an attribute is serialized and deserialized you can specify default values for attributes and uh types So if you pass in a string type will say hey, let's turn this into a date perhaps or a number if you choose Or something more complex What i'm going to do is set up this pseudocode in my define plugin So what i'm going to say is states is going to be by default some kind of deferred entity So my value Well, I could say value Is a new Can dot deferred But I really want to make some kind of age x request So this is where that data layer comes into play I could make an age x request right here. This value can accept a function. So I could say Dollar age x to some service will get me a list of states. I want to use in this application With can gs. We like to keep things really really separated Uh, if you're thinking in terms, let me I'm about to use another java reference How many in here is primarily like java was your background show of hands? Okay, maybe I will keep using java references uh Think of it like if you have some kind of dao your data layer It says hey all of your store procedure requests or your sequel requests Are going to come from this layer your business logic really isn't going to do anything on its own It's just going to touch modules in the data layer Can gs gives you a data layer uh in the form of can model So I have a couple models here. Let me open up State that's an easy one This is all the code you need to set up A request. Let me show you what how this actually does So just like we had can map extend. We're saying state inherits from can model We're specifying a method for find all don't worry about what that does yet. Let me show you Like the matrix can't be told what it does You have to see it for yourself So I'm just going to blow this up. Let me make sure I didn't have any syntax errors. Yeah, I think I'm good there Yeah, we should be good. Okay state Oh, I didn't like that Oh, I just want this on the page. Oh, it really doesn't like that models There we go So what I'm going to do is I'm going to try to make an ajax request just from the console here I'm not going to worry about the ui part yet. I'm actually going to Make that as big as possible What I'm going to say is we have states dot find all What this is going to do? Oh, that's making I have my fixtures turned on I want that to air out actually states fixtures I'm going to show you what that is here shortly Sweet okay state Our model layer gives you a few methods out of the box find all find one create update and destroy Create an update we merge together into this save method But we basically give you crud functionality out of the box The only thing you need to do with your model layer is point it at a resource In our case we've specified. Hey find all is going to be on this slash api slash states So if I go back to our model layer here We're saying hey if you want to get a list of all the states in the database This is where this request is going to go State that find all is going to make an ajax request. This is the very same thing behind the scenes. We're turning this string into return dollar dot ajax It's going to be get url api states We're actually going to serialize or deserialize the response into an instance of this model So if you had defined behaviors on this model The server is going to send back some object and it will be turned into a new instance of this model So you can listen for changes on whatever comes back from the server So This will give us This type of functionality now We have a model layer to where if you want to make an ajax request for all the states you can say State dot find all and you can do this all over the application Why do I want this in a model layer? I can just type dollar dot get states. Isn't that easier? Maybe it depends on how maintainable that is going to be because in the future As i'm sure you know api's never changed in an application right once you have it is solid gold for all time No, sometimes things change sometimes you have a new feature you need to add more information Maybe you need to change how an info how some piece of information works in a different part of the application If state services changed signatures How we serialize the data Anything I would have to go to everywhere I use dollar get or dollar ajax and make the same modifications Here we have it in one place and this one little bubble This state model or we can cleanly access and make sure our data Requests are being funneled the same way all the time throughout the application Does that make sense? Yeah, cool Well, this is no good. We got a nice 404 not found I need to call it a day. I'm gonna shut my laptop. We need to wait until some server team makes this service possible This was a very big problem early on We don't like waiting for things. We want to build things quickly Which touches on that reminds me of a point I want to bring up in a little bit But we came up with a way Called fixurizing which is basically just a way to mock Server requests mock ajax requests basically Are you guys familiar with jQuery pre filters ajax pre filters by chance anybody? I know you are Uh, this is a really really handy tool to manipulate or massage data They give you a lot of hooks All wrapped around ajax requests if you need to make all your ajax requests in your application Maybe they're gonna be application type jason or maybe you want to be some different formats coming in for all the ajax requests Maybe you want to conditionally do something on outgoing ajax requests jQuery gives you a lot of hooks On how to manipulate this and how to watch this With that functionality we created can dot fixer Which is on the uncomment this A way to say can fixer is just this object in memory This registry in memory where we say hey If you see an ajax request that goes through matching this signature get api line 29 says get api states If you see this coming through its ajax request is about to go out Cancel it don't actually make the request instead just return some static data Or do execute some function At this point now we are able to basically fake the server response and we can build the entire application Way ahead of schedule This is developing in parallel with the server team as opposed to developing in serial No longer do you have to wait for one team to build finish their project You can have this even go through iterations of your interface with whatever qa or client or user testing environment you have Before the services or the databases even set up So rapid iterations is one of the things we really really value in terms of a project success We're using can fixer here. You can see i'm doing all kinds of Fake stuff with services. We are not using yet in this coding demo But the one we care about here is get api states I uncommented that line If I go back here and I try to make the same request state dot find all It's going to return this object which as we can see here has a bunch of fun methods Indicating we have received a deferred back State dot find all is some ajx request is some asynchronous request that has gone out into the world And we now we have some hooks to listen for when it's completed and what to do when it's completed So I should be able to do something like this var deferred equals state Dot find all so we're going to get our promise back and I'm just going to assign a pointer to it I'm going to say dfd dot then Function we should get a list of states back my console.log States so here we have this array like structure with a length of three If I take a peek inside one of these we have something with the name wisconsin and a short name of wi Our second is something with the name of michigan and a short name of mi I assume the third is illinois with the short name of il. We have successfully received data back at the resolution of this promise Cool Now we haven't touched any ui parts yet. We haven't actually manipulated the dom. That's the whole point We want these states to be in that select so Let's get a little bit closer to that If we go back to our view model here Rather than say this is a new deferred. I would like Uh, let's change this slightly I'm gonna say hey whenever something is requesting the state's property. I would like to invoke some function So i'm gonna use a custom getter For those of you not familiar with the syntax you can write your function like this but We don't have to these days. We can just say that but it's the same thing We're doing the same thing get is pointing to some function which we're about to invoke So whenever something like a presentation layer says hey, give me a list of states It's going to trigger this get function. What this get function is going to do States is a promise and we just saw state dot find all returns a promise Return state dot find all i'm going to make my model request from this layer States will be the promise return from state dot find all Let us stop here and refresh the page You can see the loading graphic went away. It says choose the states We got our three back in the view Don't worry. I'll show you the presentation here after that. We're done with the view model Cool. We're starting to wire things up things are getting completed now If I select this state I should be able to select a city So we need to make some other kind of ajax request one I would like to define Maybe some default behavior for a state itself So our state Maybe has a default value of null Or you haven't selected the states at all However, let me put cities on here as well However If state is not null, we want to make some ajax requests, but we're really requesting cities So i'm going to write a cities getter This will be a cities get function and whenever this is called We're going to do some logical check. I'm going to say var state this dot adder state I'm going to stop here for a moment because this may be a little confusing This the this keyword if you were there for yesterday's workshop follows three very simple rules remember functions or methods don't Exist in the traditional computer science sense and javascript functions do not know where they live in javascript They only know how they are invoked So that this keyword follows three simple rules dot call, which is like food dot bar The new keyword context will be set to the new instance of an object and call and apply where you're manually setting the this keyword So with a lot of helper libraries kanjs being one of them We actually set the context for you to what you would actually think this is A lot of what kanjs does is very class Inspired there's a thing a lot of things that we thought organizationally from architecture level are make maintainable code So this in this getter will refer to the instance of this view model So it's going to have its own state's promise its own city's promise its own state value But it's going to be unique to the instance of this view model of this object So all i'm doing is saying hey Give me our current states attribute We do this by saying dot adder if you're familiar with jquery's adder method It's very similar except we're not talking about getting the attributes of a dom element We're getting the attributes of an object Why not just say this dot state? It's how we listen for events and how we set events in kanjs Nothing wrong or right angular will let you do this dot state It'll let you play with the general objects But this is just a different approach when you're listening for events or binding to events in angular There's actually a polling mechanism behind the scenes that will see when the object is changed If you're curious about this feature, it's called dirty checking kanjs We spend a little bit of extra time Setting up these objects and wire up our own events So when you call this dot adder, we don't have a polling mechanism that says are you changed? Are you different? We know immediately you call this dot adder something is changing right now Does that make sense nothing wrong or right about either really it's just a different approach uh, so what i'm saying is Check the current state if The current state exists. We want to make some ajax request Now i'm going to use a little different syntax. I'm going to say return If state exists I want to say city dot find all with state state Otherwise don't return anything at all City is another model which I need to import up here Import city from models city City is another abstraction. It's just going to access a city resource on some database or some server And we're going to try to make an ajax request, but only if the state exists If the state exists then we will try to make the city Request let's see if we wired this up correctly. Oops. I got a typo Oh, wait line 25 state state That looks good. I'm pretty sure it's right there Nope it's before there. Oh there. Thank you. Okay So now if I choose the state it's going to set the state to property It should Make an ajax request which it just did Let me see if I can slow this down I want to make a request It's making an ajax request going out to the server two seconds had passed We're simulating a slow latency server responses slow down But the city has resolved the promise resolved here And now we have a list of cities in the second select box Kind of a fun little note fixtures are really good for again simulating Ajax requests or preventing Ajax requests from going out But we don't just mock data we let you mock everything on the request So if you wanted to set up a in this case, I'm just simulating a slow latency connection. I said hey increase the delay to 2000 milliseconds We have a default to delay of 200 milliseconds just to give you enough to Feel like something's happening So you can have whole sets of fixtures, which I typically do in a large application Whole sets of fixtures that say this is how the application will respond with a bunch of 500 errors This is how the application will respond if you're unauthorized This is how the application will respond in a really slow latency session or Eight area and here's how the application will respond in ideal settings I prefer to have many sets of fixtures Because I want to know how the application will look if the server gets struck by lightning before the server actually gets struck by lightning How many of you in the room use gmail today? Few people you're all aware that gmail is a thing everyone in the room has seen it right everyone see have you guys seen gmail crash Gmail throw an error Yeah Some say no, what does it look like when it does? Oops Nice little pink reddish warning at the top that says oops We're trying we're you know something's going wrong, but you feel nice and taken care of like oh, they're holding me I feel good right now even though something really serious could have just happened And they test this it wasn't like by coincidence like oh, you know It's you don't want to receive like the 500 Apache and evades server unavailable error You want to have something that's tests whether or not your ui can respond to those kinds of those kinds of requests So you can set that up with fixtures Simulate slow connections aired connections To see to make sure you're in the right mindset Let me hear this delay because we don't need that because that was for a dramatic effect So far we have our state set up. We're making states requests. We got our promise back. We have our cities set up Now we can say hey Let's make sure we set our city Let's have a default value here of null as well But what I would like to do one of the additional parameters of this page and the application is if you reset The state if you set the state a second time it should wipe out the cities So whatever city you have selected, maybe you should reset it Uh, so what we could do here is say Actually, I'm gonna leave that for a second. Let me put restaurants in here too restaurants those are final promise so What I'm going to do here, let's see If you set the city if you set the states I'm gonna put a set Function With setters in canjs You're going to get the new value coming in that you would like to set And whatever you do in that function, whatever you return is going to be the actual value that's set on a property So setters are basically this hook before the actual setting happens if that makes sense so maybe somebody sets If you have a pagination view model and somebody wants to set the page to negative one You say hey, if this is less than zero don't use that use zero instead And you don't let them set the value to negative one. You just reset it to zero So you have a lot of power over how uh attributes how properties of an object are manipulated In this case if the if the state is reset, I'm going to say this dot adder city Is null just going to reset the city selection back to null So if i'm in illinois and it changes to chicago, I go back to wisconsin It's changed to say to wisconsin chicago should not be selected anymore. It's going to go back to choose a city make sense The final piece of this is in restaurants What I would like to do is say On my getter Whenever you try to retrieve restaurants I'm going to check to see do I have a city and do I have a state then try to find all the restaurants in that region so We can do the same thing we did for Getting the cities i'm going to say var state Is this dot adder state? city is this dot adder city Then i'm going to return If city and state both exist then I'm going to say restaurant About find all we have another model another ajax request We have something called slash api slash restaurants And I want to make a service request out to that with the parameters of state state and city city If city and states don't exist i'm just going to return null so far so good yeah So now if I refresh We should Be able to see green bay here. Oh Don't forgets to import what you're using restaurant From models Wisconsin green bay We made a request out and we got a list of restaurants back from the server If I choose if I did this correctly Illinois it's going to wipe out the city which will in turn wipe out the restaurants because restaurants getter is saying if city and state So as a response it's going to wipe out both Choose chicago and we got a new set of restaurants. It's the fake set. So it's the same set of restaurants This isn't an actual server request or spago is just a really popular restaurant but We have now a responsive way to control what is happening in the ui now intentionally You may have noticed at this point We are not Doing anything in the dom in this layer The dom is responding to the changes we're making in this layer, but i'm not saying dollar You know find some selector and change the contents of that element I'm not even technically making ajax requests directly from this layer as well This is a very abstract kind of thing where I can say let me just do this to window dot vm equals vm expose this Out here or vm equals new vm If I wanted to test and make sure that the logic behind my application is doing what I expected to be doing I can write this code here not in the console preferably you'd have this in some kind of test, but i'm doing it in the console So I can say var vm equals new vm Blow that up and we should have a default set of attributes Serialize our fancy object. You can see we have the default values of city and state being null If I try to do something like vm.adder, I'm going to try to get states You can see a request went out for states I'm going to say vm.serialize one more time. Oh, we don't have a state selected So if I say vm.adder States is just going to make the ajax request what I would like to do Let's say vm.adder what i'm going to do i'm going to clear this noisy part out is i'm going to set the state To Illinois and the act of setting the state should trigger our city's ajax request Hey, we need to make an ajax request the state just got selected And we should have now at our cities Getting a response back. There's our promise We can completely go through the business logic of this Particular page this particular application Without worrying about how things are going on in the DOM I'm not saying you shouldn't test the DOM. I'm saying there's two concerns you have here Your primary concern is setting the state to i l And then you have a secondary concern as well to making sure those states appear in some select box Does that make sense? With separating out these concerns building something like gmail becomes somewhat more trivial Because if I said hey give me a list of all the recent emails for a particular user I don't know where to start But if I said make an ajax request for this service I think I can figure out how to do that Does that make sense the secret to building large applications is don't build large applications Any questions so far? I showed you a bunch of new apis that you probably never seen before Cool so Going on with this Mindset you can build some really really powerful stuff for your Entertainment and enjoyment place. My order is a live demo app place my order calm And it's full entirety and is available on github. I believe under can j s if you go to github can j s It'll be out there a little slow. I should have downloaded this one But you can actually see we wanted to provide a demo Uh, this was something our designers actually came up with it was actually a lot of fun because It looks like a Real ordering site so we might want to put a little label here that says no you won't actually order food from these restaurants But you can click around we have a lot of different components that we use in can j s in this application For that reason we wanted to say hey To do mbc is kind of cool, but that's not really how we build large applications. That's a very specific set So this is something we have things like routing State maintenance how different components and widgets communicate with each other Routing saying if I click on some tab, it's going to go to some url I can go backwards and forwards, which i'm not going to do because the latency is a little slow, but All this is open source and free for you to check out I'm going to break this down a little bit simpler. This is a little bit more complex in terms of how we do view models Typically when i'm building applications today I follow the mvvm pattern Which is the model view view model model being our data layer view being our presentation layer View model will be in this kind of business logic thing. You can have many vm's. It's not like one vm is tied to anything necessarily Just a way a place to put some kind of abstract logic container so When we're building stuff like this, that's what we're talking about but We can take a step back and build something A little bit more So i'm going to start from a blank slate with this grid folder Let's see which process this is Yeah, we can leave that there talk about the apis Yeah, maybe i'm going to talk about the apis before i get into a simple grid demo so You saw a lot of stuff. You saw can maps this observable object interface. You saw this defined plugin where we Define how properties are set or how their behaviors work on a given object The reason all this exists the reason all these tools in different apis exist Again is constructing these are small Individual little modules that we use to build up to really complex components and applications It all starts with something called can dot construct so How many people in here are experts on prototype based inheritance? Really common. Maybe you've seen proto and you're like what is that property actually doing Maybe you've seen a little bit of it, but you don't really know how to explain it to another person So your comfort levels will Kind of vary But most people in the room. I would wager are very familiar with classical inheritance Is that something I would is everyone's not in their heads. Yes. Okay, cool so JavaScript there's no classical inheritance model There's no way to say public class person inherits like colon inherits from human that kind of context But there's a few things that classes in the traditional like c-sharp and java sense bring to the table that are kind of nice for Very large applications. So we came up with can construct. This was originally called dollar class which was inspired by Very old article from john russig the simple class inheritance simple class based inheritance If you're interested in older blog articles but Can construct is a way to set up simple inheritance in javascript Most frameworks at this point have something similar, but it basically lets you do this So you can say far or human Equals can construct that extend You can say var person equals human that extent Can construct is our basic level of setting up inheritance. This is where we get this extend Ability from var p equals new person and we should see p instance Of person p instance of human that should both be true So behind the scenes we're setting up The necessary properties for you to have this inheritance architecture in javascript With a very simple api this extend api Along with can construct you get the ability to set defaults and methods on given prototypes so that maybe humans can eat and persons Our people persons people can have a profession You can get specific at different layers Any way you would want to set up this kind of inheritance structure, but can construct is kind of the basis It's like ground zero for everything that we're doing in canjs Can maps take can constructs a little bit to the next level can map inherits from can construct Because we want this simple javascript inheritance But we want to be able to observe when properties and attributes change. This is where we get can maps from Originally we called can map can observe. I think a lot of frameworks still call it something observe We change it to maps because down the pipe you're going to have Observable objects in your browsers natively, which will be pretty sweet Hence the name change Models take maps a step further models are maps Which you can listen for changes from just like maps, but models give you this restful abstraction interface So you can make it an easy way to say hey all my requests for the people service will go through this model make sense This is all at the kind of the data layer level One of the things I think about when I'm building rich applications If you have a very rich data layer a very rich model layer Building the presentation is easy That's the fun part How do you add a grid? I I can't tell you how many times I get the question How do you add a call we have a really complex grid in our application who here has a really big grid in their application? Yeah, pretty much. I would say I feel like some of the hands maybe you're not going up Everybody what application doesn't have a giant grid or list of something Just anything it's a list of stuff Uh, there's a lot of really good jQuery plugins out there that lets you Attach make grids dynamically with some simple data sets Jq grid was one of them. It's really really popular and we get a lot of questions on how do I add a column dynamically to jq grid And immediately I'm thinking Maybe you should be using something custom A lot of times we try to shoehorn Our data or whatever we're trying to do into some generic module or response Educate yourself about what that module is doing and if you can't use it anymore, don't be afraid to make your own We're all engineers. That's what we do So What i'm talking about building the presentation layer if we have a rich view model where we can say hey once states is set The city's properties is going to populate itself. We don't have to worry about doing that. The model is set up already We just have to use it Then how do you add this data to the dom? You write a table In your dom How do you add a column to it? Then you add a table cell to the table The presentation becomes very very trivial if you have this rich data layer So This is all coming from where we're about to head We have a couple of things to help you set up this view layer before I get into that I'm going to show you what the this view layer looks like specifically You've heard about different view rendering engines can js has a couple But we really focus on one which is can dot stash It's a mustache inspired syntax. So if you're familiar with mustache or handlebars, this will look very very familiar And we wrap this up with something called can dot component. Are you guys familiar with web components? Yeah, some people are some people have you heard the term web components at least okay A web component is just a custom html tag You can define your own behaviors But it's something that you've built and you want to share in a declarative syntax with some other module or some other department However, you want to share these modules We're not there yet. This component concept is defined with just javascript and css But this isn't something we can just share with other teams or other companies quite yet So we have a lot of frameworks that give you some kind of intermediary solution can js being one of them At this point, I believe Most of the major frameworks all have some kind of solution to let you have custom html tags Angular has its own syntax can js is going to have a similar Or a similar kind of approach ember not similar to angular. I don't know why I said that Ember is going to have its own syntax react has the jsx Templating setup everybody has their own way to give you the ability to have custom elements in the dom somehow So With cangs We give you can components which you can define Let me blow this up I'll show you that restaurants one Restaurant list In this fashion This is the code you saw a second ago all we're saying is register This tag pmo hyphen restaurant hyphen list so that somewhere in the dom you could say Open carrot pmo hyphen restaurant hyphen list close carrot the same way we would just say open carrot div close carrot You can use this as an html tag in the dom. We're going to specify the html And the javascript behavior for this tag the javascript being the business logic layer That is in the view model that we just wrote what this is saying is every time you use this tag This will create a new instance of our view model map our view model objects So every component will have its own basically state If that makes sense The template is just the markup, but it's not in pure html It's in mustache mustache syntax With the can stash engine So you can do stuff like this I'm going to skip down here to the select for states and we're going to say if states dot is pending States remember is a promise So it has a bunch of cool, you know hooks like then do this fail do this other thing But it also gives you status updates. You can say is this promise in a pending state Is it in a failed state? What state is this promise in and we can declaratively state if the states are pending Maybe show the word loading This is what you saw in the city's select drop down where I just increased the latency to like two seconds for the response You saw a little loading icon or a little loading text So if you wanted to add a loading graphic to your page If this promise is pending show this image Else do this other thing show other data So this becomes really really easy to set up in a declarative approach If a state currently is not selected This is if you're familiar with regular expressions. The hat is just the negation of whatever is after it So I'm saying not if If state is doesn't exist then show an option that says choose the state That's all I'm stating here If the state does exist Then don't show this option at all Here let me get this more on the screen There we go If the state does exist We want to go through each one of these states I'm saying states dot value value is our little hook to whatever the promise has resolved to We can't say each states because that's the promise itself Value is the resolution of the promise I want to iterate through each one item in that array And just render the short name as the option value So we'll say option value equals i l But the actual the value or the text rendered in the dom will be illinois Because I want the full name Does that make sense? And you can do this all through your markup So because we built that view model first in a very rich context Putting this together is just Basically just dropping whatever elements and styles you want on the page Make sense? cool All right Yeah, you do have a sense of logic because you have if Mustache at its core is supposed to be logicless templates But if is also in the mustache specs. That's kind of like counterintuitive So you do have some sense of logic, but this isn't necessarily your business logic This is what I consider presentation logic Does that make sense? So when I say logic layer, I'm talking about The business logic layer rules that are specific to the business Presentation logic is really what do I see on the page? It's not necessarily What property is set and is it set correctly? If that makes sense very good observation There is a sense of presentation logic happening here But This is decoupled the presentation layer doesn't really care about anything going on in the in the business logic internally And vice versa the business logic itself is just setting attributes on objects It doesn't say hey make sure you change the divs html or make sure that this new background is green It's just setting properties and this view is responding to them Does that make sense? cool Putting things together in this Fashion lets us build up really really rich applications very very quickly So let's start from scratch How are we doing on time? I'm gonna assume that we're okay. Wait. What time is the tea break? You missed it. Oh, uh I can just keep talking Uh, let's take 10 minutes. We've been going for I guess an hour at this point Let's take a quick 10 minute break Get up stretch your legs get some water get some coffee. I know there's got to be still coffee out there We'll come back and I'm gonna live code this from scratch and hopefully we'll get to the chat application I'll just do it from scratch as well And I will stick around for questions. You can find me around roaming the halls and whatnot cool Come back at 240. Thanks guys Please simple Grid I don't even think this one's gonna need too much view model logic. Maybe we can add some to it Depending on how we see fit But I want to show you this From the ground up at a simpler level So with using steel is kind of really ingrained with all we're doing Steel is just our loader. It's how we can say one file depends on another file within this project JavaScript doesn't have this functionality yet But in the meantime, we can polyfill it with something like steel and this you can use this whether you can use your require You can use your own different loaders Browserify I'm using steel because I want to write an es6 for this demo because that's a cool thing So this is what I'm saying here Steel is going to look inside. It says, oh you're using npm Rather than have another manifest file like a steel config or require config We already have this manifest file in the project called package.json So I'm going to look in that for where we want to start I have a main tag that shows our main attribute that says hey the application of starting point is here at index so I'm going to add an index.js This will be the first place that the application comes to when the project kicks off And I'm just going to say console.log Hello And we should here see hello in the console So this is kind of nice at a very simple level. We know that the application is at least doing what we expect We want to do something a little bit more complex than hello Maybe we want to modify the DOM somehow. So I want to use jQuery for this import dollar from jQuery And I'm going to say dollar body.html Hello I'm just going to modify the body of the entire or the html of the entire body to hello There we have hello on the top left of the page So far so good So we know with jQuery we can modify the DOM elements contents modify DOM elements in general I would like this to take this even further I would like to have some method that can create DOM elements from some type of template So in our case I'm going to use the stash engine. I'm going to use it directly So I'm going to say import can from can And I'm going to import our can view stash plugin And what I'm going to say is our template is equal to can dot stash. Hello What this is going to do is it's going to parse that string and return a function So template right now is a function And when you ever whenever you invoke this function template open close parens, it's going to create a document fragment This is a lightweight version of a DOM element that we can manipulate very quickly But in our case, I just want to insert that fragment directly into the DOM So I'm taking our hello string Creating a document fragment out of it and inserting it into the DOM of the page So we should at the end of the day see you know what I'm going to change this just so it says So we know it's something different We should see hello world in the page So far so good Why did we go through all that trouble? Why not just say dollar body hello world? Well, because this can do some cool stuff like have mustache tags So I'm going to say hello name Now all we need to do in this function this function can accept an argument This will be the data that we merge with that template Does that make sense? So we're going to merge some object with this string if you're familiar with jsp's erb's asp's jsx's They're all string parsers That's all we're doing. They're very fancy string parsers, but that's all they're doing is saying hey Here's a giant string with some special tags and we're going to replace those special tags with other values At its core every view engine is doing that much stuff Does that make sense? Okay, so all we're saying is in our special tags They're double curlies or single curlies or triple curlies, but they're mustaches And I'm going to merge in name is alexis or name is jQuery India And now if I refresh this it should say hello jQuery India It took our object And merged it with a string now with this concept alone Where did that object come from now you can start making requests You can say make an ajax request get some object and then parse that with the string Maybe the string comes from somewhere else with these the simple rule you can break this out into a much more complex picture this Is going to be terribly unmaintainable. I don't like maintaining markup in a string I would refer this if it was in its own file With steel and can you can do that really easily I'm going to create an index dot stash thus the Extension is kind of arbitrary unless you're using kind of some kind of plug-in syntax Steel as a result system js has its own plug-in syntax Very similar if you're using used to using require plugins and require js. You can do stuff like this Uh define like text bang foo and it's going to say hey Retrieve this foo resource and run it through the text plug-in In system js or in steel you're going to say something like import and then uh index dot stash Bang it's going to say run it through the extensions plug-in. So stash is something special The bank says this isn't the js file do something else with it run it through this thing So all i'm going to do This is our template file i'm going to say hello Name is awesome Just so we know it's a different file And i'm going to actually i'm going to put it in an h1 h1 Just so we can get a semblance that this is a markup file And over here rather than do this whole thing I'm going to say import template from index dot stash bang So the bang denotes that stash is a special plugin The dot slash if you're familiar with unix file searching conventions This is just saying look for this file in my current directory dot is my current directory slash index dot stash And once I get this whole thing this will return it uh the stash plugin will return a function back So now we should be able to see Hello jQuery is awesome in an h1 everyone's still good so far still with me All right So let's make this more complex what I like to do typically if I have a wireframe and i'm working on the interface Uh that I just got from the designer first is i'll set up this in a static markup context Don't worry about making things dynamic yet. Don't try to do too many things at once I just put the markup on the page and make sure it looks the way I expected to I'm gonna say table This is just for bootstrap i'm using bootstrap because i'm not a designer and I did something that looked kind of pretty right off the bat Because if I designed things it would look terrible And i'm just going to give it Some basic grid properties i'm going to think of a simple grid Maybe we're going to show a list of users and we'll show their name And how about their favorite color favorite color I'll show two columns their favorite color What I would like to do is show one column With their favorite color as the value of an input And then one column with the entire column like the background will be that color So Let's say tr tr Name will be alexis Favorite color will be An input with a value of blue. I'm going to set the background color Now if I refresh this page we're out of a really simple grid setup It just shows a name an input and a favorite color at a static sense We're like, okay, this is starting to look like the application I wanted to build Let's give this more power. I would really like this to show a list of users That's the primary goal here. So how do we get a list of users on this page? Let's take a step back Because we want to say, okay, we're not worried about allies anymore We're worried about making an ajax request. So I'm going to create a models folder I'm going to create a new model to represent what we're trying to do I'm going to call this user.js It's only by convention, but I typically name my models in singular The same way you would name a class if you had a person class in Java You say public class person Not public class people the pluralization of it Because typically you'll have some kind of generic collection called, you know, open caret list closed caret people or a person that'll make your list of people For this all we need is can From can I'm going to save our user with a capital U Can.model by extent Again by convention I typically name variables that you can create instances of with a capital letter If it's with a lowercase letter, then I don't expect you to use the new keyword All of canjs is built in this fashion So you'll see some things with lowercase and some things with uppercase that denotes what you can create instances of That's all we're saying to default user We also give you a shortcut resource Earlier you saw find all so we have five methods find all find one find all is all the users find one is find a singular user Create will create. It'll make a post request to the server Updates will make a put request to the server destroyer will make a delete request to the server when you're designing your apis Please use your htd verbs Always always always it's a great way to categorize things I can tell you for the bulk of my career in dotnet development. I did not Everything was a get request And it was terrible. I thought I was cool, but it was not it was not a good idea And then I discovered oh, there's objects that are too big to go in the url Oh, there's post requests everything was a post request after that still not a good idea If you're if I'm a developer and I'm coming to your team and I'm looking at your code It doesn't matter how talented or intellectual that person may be I'm not going to understand your code on day one probably not on day two either The first thing I'm going to look at is your api and if everything's a get request now I don't understand that either there's not a single thing I'm going to understand So at least let me know what the verbs are doing. It's like oh, there's a delete request. Oh, that probably destroys something Here's a get request. That looks like it's going to retrieve something so if you are following standard rest conventions, this will give you the following Requests it'll give you find all which is slash users find one get slash users with a given id Creating user post users updating user users with an id and deleting the leading users with a given id If you use resource, we'll just give you all of those out of the box. Hey, this is using standard rest conventions I don't want to type that much my endpoint is the users api So that's what i'm going to do here Again, this is not doing anything with the dom so we can test this immediately when your user Equals user and make sure it's available import user from models user So if I refresh this grid Go down here. I can say user dot find all and we should see a breaking agesh request It's going to make a 404 because it's actually trying to retrieve data That was a real request that went out. We know our model is working if I said Var user equals new user user dot adder name I'm setting the name of the user to alexis. I'm going to say user dot save this save will create a It will execute a create or update request depending on if there's an id that exists on this object If an id exists, we assume that it's something that exists on some server resource And we'll create a put request in this case the id does not exist So if I hit save we're going to get a post request If I go to the network and I click the post request I look in the body We sent the object data name colon alexis So we've successfully made a post request to the server now It's error erroring out because the server doesn't exist I don't want to write a server so we can get around that by using fixtures So let me clear that out Before we go any further let's create some fake data fixtures new file and I'm going to call this users dot j s and I'm going to say import can core from can And a plugin can util fixtures fixture fixtures I think it's singular. Yeah What I'm going to do first before I wire up which request should go to which data I'm going to generate some fake data. We give you a helper function called store So I'm going to say if our store equals can fixture dot store Store takes two arguments One is a number. How many fake things do you want to create the second is a callback function? What do you want to do to create your object? I'm going to create 10 users function Well, we said a yes six syntax so This is the same if you're not familiar with that It's not exactly the same function I But it's similar to this the only thing that's different between the rocket syntax and this And for purposes of this example is a context you have a lexical scope versus this is going to give us a new It's going to change this for us this will not I'm not using this in this anyways, but What we're going to do this callback function will be executed 10 times I'm going to create these 10 objects that are returned So in my case I'm going to simulate what a server would return for individual users Maybe that has an id of i so it's going to return objects of id zero one two three four five six seven eight nine and maybe a name of user Zero user one user two and maybe a favorite Color, but I'm just going to hard-code that to blue to blue and up blur Export default store just in case somebody wants to use this module now This is just creating the fake data What we want to do is wire this up to jQuery's pre filters and say hey before an agis request goes out Check it to see if it matches one of our signatures We can do that with can dot fixture directly and say can whoops that fixture For the get users signature if you're finding all the users you want Then don't make the request call store dot find all instead The store can fixture store is going to return this kind of data store objects With the same api that models have so if you're using a find all method in the model you have a find all method in fixtures Just to clarify because this happens a lot fixtures are basically just your test code You can use it for running tests so you don't hit some server while you're automating your Tests you can run it while services don't exist so you can test building the api But this is not production code fixtures should not make it out the door It's only for you the developer to run your application without a service Does that make sense? A lot every now and then I see these fixtures like sneak its way into production code I'm like no, no, no, that's just you're making it heavier for no reason because there's no benefit for having these So with this setup I'm going to include our fixtures here import fixtures users and now If I said user dot find all We're going to get back Our promise we didn't get an error you can see the little info message Using a dynamic fixture for get users that means our fixture pre-filter found the same signature and said We're not really going to go out into the world. Here's a fake data set if I were to open this up And say user dot find all Then function users console.log That's all of them. I think there is our map. There's our array. You can see we have 10 observable entities in there Each one with a favorite color blue id of zero user zero if I go down to number seven Blue id seven user seven we have 10 individual entities that our fixtures are simulating being returned from some service Cool Now what we can do Is now that we can make that request what I would like to do is pass it into our template So what I'm going to do is here I'm going to say users Is going to be user dot find all I'm going to make users the promise that we're going to return as promise will be available in our templates So if I go to our templates Here I should be able to see Users a log just a console log from the template level saying hey, what is my current scope? What do I currently have access to? We should see An object come here here's users and if I expand it it is our promise So this is good. This is a handle to some agent request that has gone out into the world So we can do things like When this promise is resolved Each users that value because we want the resolved version And that's all I'm going to change. It's still a hard-coded table row But it should create 10 of them one for every resolved item in the array If I This sounds for fresh page Now we have 10 rows So we know we're correctly rendering the response that we just got back from the server. This is good Uh, maybe the server is taking a long time. We want to show a loading graphic So maybe that's a different table row table row call span equals three But we only want to show this if users is pending if And here we can say if users is resolved If I refresh this now It's going to say loading for a split second and then load the grid. I can slow that fixture down as you saw before I'm going to just say can dot fixture dot delay equals 2000 milliseconds that should Give us a loading graphic for as long as we need then it's going to remove The templating engine is going to remove that element from the DOM and insert our new table rows in that segment cool We don't probably want to just hard code some list of names and values Rather It'd be nice If this was tied to some value So we have a cross binding syntax every framework has its own kind of cross bound syntax ours is just can value And I'm going to say this is cross bound to favorite color I'm going to use the same here, but I'm not going to cross bind it. I'm just going to listen for changes because this isn't an input favorite color And instead of the name I want to actually render the user's name itself So by changing those properties to a more dynamic Syntax again, if you're familiar with mustache or handlebars, this should look very familiar I can refresh this now and we have users Zero through nine all ten users, but if I change this color It's going to live update anywhere else that attribute is being used Again, we're only focused on changing the properties of an object. The view is just responding to those changes Nowhere in my code did I say On change here dollar find the sibling table cell and change its background color I shouldn't have to worry about that you want a tool set that kind of handles that for you Does that make sense? Is there any questions on what I've shown you so far? I kind of want to stop for a second because I'm realizing we're Approaching the end of this session very quickly. Yeah, go for it When the promises result Yes Now only the promise section. So this that's a very good question No, this entire markup is already processed What the view engines most most view engines are typically doing is parsing this string and turning it into a function Well, we're going to create whatever necessary documented fragments We need to and put them in the DOM as quickly as possible Inside this if users is resolved This is going to be its own function This whole thing will turn into a document fragment We will put that on the page when this promise is resolved. We have an event listener saying oh Something is finished. We're going to create this document fragment and insert it into wherever it's supposed to go Does that make sense? That's a good question We're not going to wait for this whole thing, you know, what if this is a really slow Ajax request And this is how you have things like gmail if you've used gmail on a slow connection You see pieces of the page starts to load That's what's basically going to happen if this was a really slow connection. You can see let me put the fixtures back to a really slow latency Loading name favorite color the heading of the table you have DOM on the page We're not going to stop rendering just because something is taking a long time It's only that segment in our case the trs that will take whatever time it needs to And you can show a nice little loading or oops Whatever you choose to show to kind of baby the user while you're making your updates What's going behind well on behind the scenes more than I can explain in the next five or four and a half minutes But if you're interested in all of this stuff, we have a weekly podcast and we're about to get into the can gs section So check us out on betovie's youtube channel During the podcast it's live and open to the public So you can actually chat with the core team directly and we'd be happy Justin who typically runs the podcast primarily. I'm usually his co-host would have more More than enough enjoyment detailing all the intricacies to all the engines, but we also have I'll put him some links in the jQuery talk Area there's a conference engine area for this talk. I'll put some links to the slides. We have detailing How the view engine works how components are set up We have much more in greater detail talks than I could squeeze into a 90 minute show here It's hard to explain like how do you build gmail in 90 minutes? That's it's kind of a that was basically what we're tackling here So go for it Yes No, no, I only have it in one file. I put it in the index file Typically in a major application. I don't even put it there. I configure it dynamically somewhere else so that no production code has it at all I am doing it just in the index file because this is a really simple This grid didn't even have a component. It's just a very very basic example of can j s But you're right. Typically. I don't have fixtures even in that file If you're using system j s there's a config dependencies option where you can check dynamically What mode am I in is there some However, you want to differentiate Production versus a development test environment if it's in a test environment load fixtures. If not, don't worry about it Yes, you can have your own logic with fixtures. I didn't touch that but I left The door open right here export default store So if something was importing From this fixture sets, they could modify the store if they needed to so you could have really really rich Fixture setups if you wanted to Totally good questions. Yeah. Yeah, sorry. You're right behind the light there. What's up? Sure You don't think about where it's stored it could be stored on indexed a b index db I'm sorry mango or a piece of paper or a hamster running on a wheel However, you store your data is behind a screen that we should not even know about All we're going to know about is some api end point that we're going to touch Oh, okay. I see what you're saying. Yeah, well in that case you would want you can remodel model You can set up model to have your own custom access methods. I see what you're saying now So find all find one create update all those are right now just Assuming that you're making a simple rest request If you wanted to make a custom request you can make find all a function And that function could do anything you want it to do and it will still be in one place And when you create nuances of the model you could say find all That find all could be looking local storage first or on a server primarily that logic is up to you One of the biggest differences between us and the other frameworks is we try to make this As modular as possible. You'll notice in all of these files. I'm like import can from can import this plugin import this If you don't like all of kanjs, that's okay If you just want to use fixtures and you want to use it with angular I think we have a demo of doing exactly that I think If you want to use just components or just models Obviously, uh, I have a personal preference to use it all together because they mix well together But you can use each little piece as it may be We when we were with javascript mvc not when we were with them we built it But when we were primarily using javascript mvc, we had the it's our way or the highway kind of attitude And then in 2009 we started like hey, it'd be cool to just break this out. Maybe it's better for the community Maybe it's just better for us. We can maintain things easier So we broke it out into many different modules So now it's a very open kind of system There's a lot of people that use kanjs with browser fi There's people use a kanjs with different view engines entirely if you wanted to use kanjs with Twitter's hogan, which is mustache compliant. That's cool. You can totally do that Live binding won't work the way you expect it or you'd have to wire things up manually because we handle that for you in the stash engine But as long as you're comfortable with that you could basically do whatever you would like to do out of time We have a 15 minute break between talks But that is the end of the time here. I'd be happy to stay Up here. I will slowly close my laptop for the next 15 minutes to get off stage for the next presenter But if you have questions feel free to follow me around the halls And thank you for coming to jQuery Bangalore. It's all I got