EmberJs Hello World Tutorial Using Rails 4

hi this is Justin Gordon and I'm gonna give you a quick presentation on making member jsmerkle for persistence so a couple weeks ago I created a blog post called ember.js hello world and what I did was I gave a few tips for setting up Tom Dale's intro tutorial video on YouTube here and so that's it's really good tutorial it's a great place to get started totally encourage you to take a look at it and I got some great tips on this blog post on how to set it up it's a couple little details there that might not be totally obvious from video and I got the latest source code they're available in a git repository ready for you to take a look at one thing if you did look at the blog post I'm not sure if you might have realized it but the embedded right inside an iframe inside the blog post is the actual ember.js application pretty cool no server-side logic at all this is just some plain JavaScript so next let's figure out what it takes to convert this application to use rails 4 for persistence what the application is gonna look like is this here's Ruby on Rails excuse me here's the the Ember j/s tutorial and this one's actually using the database so here I can say hello world notice the text over on the left side that updates the same time and here's the first part of in this parts going to be in markdown mode so bold and Itali pretty cool I'm not sure if you notice at the bottom down here it was actually typing in the markdown and additionally I can say header level to like that and some additional markdown mode pretty neat I can say create this blog post I can notice also the the ID number they're updated to number three I can edit this blog post and I can say something else I can say done it saves it when I edit this notice that watch this watch right here and watch the title can do that and it updates over here so that's really the beauty of ember j/s it's a full Model View controller setup and you really there's very little code to make this happen if you add a post you can hit notice here that the URL says post new if I hit cancel it went right back here to the post smoothly if I make a new post and type in another one watch what happens when you says new right there I hit create and it changes to four it's a little bit of special stuff that needs to work to make this happen and just so you know that this is actually with persistence and this is actually at Heroku I'm going to hit hit refresh and everything loaded up so what I want to show you is the one walk through you the commit history I'm going to do that in Ruby mind go in Ruby mind I'm going to go check out revision and then when I go run and my run tab I hit stop and then I hit start I switch back into canary and by the way if you aren't using canary for debugging you should because it's got some additional tools that you're not going to find a plain old chrome and refresh the page what do we got we have the basic rails application that you got if you type over on the command line rail generate app inside of Ruby mind the files that were created if I show you inside the changes window and I click on initial as we've got files like application dot J s now I'm gonna walk through the diffs inside a ruby mine because it's quite a nice tool for browsing the get diffs the next commit that I've got is this file get ignore and what I'm gonna do here is I'm gonna ignore the CoffeeScript source Maps because I'm going to add that to the gem file I'm gonna ignore my Ruby mine files I'm gonna ignore public assets because I might end up doing some pre compilation and I don't want to see those files in the commit history so when I click on Rea any file in the history browsing I can hit f4 and it'll bring up that file one thing to keep in mind is in order for me to use that functionality I have to make sure I check out the revision if I want to if that file was recently added otherwise f4 brings you to the current version the file whatever you have in your workspace it's even a nice preview mode inside of Ruby mine to see the markdown file okay let's get to where the action is now we're gonna add ember rails it's really key to go to the instructions at github.com slash ember j/s ember - rails let's take a look at the change I make to the gem file these are the changes that are recommended in the instructions remember rails so notice here Ruby mines telling me that there's one difference in the file and I could see very clearly what what has changed you run bundle install and that updates your gem file lock file so you can see here the dependencies of Ember rails one thing that's pretty key is handlebars sources coming in at the rc4 level if I didn't put handlebar source and specified it as that particular version the actual current non release candidate handlebars is a much lower version number so we wouldn't get the right version of handlebars and ember rails wouldn't work then I changed the gemfile such that I was experimenting with removing some of the things like ember source 100 rc4 but the problem later on experience is that that actually doesn't work that the original instructions in the ember rails repository are correct you do need these versions to work with the current version of ember rails I'm going to enable CoffeeScript source maps and that's pretty cool the next commit I'm going to show you is what happens after you call bundle exec rails generate ember bootstrap that's what happens right here in step 4 of the instructions all these instructions in getting started in the Ember rails readme are absolutely critical so what did that do that added these files in these directories and the reason why it's hanging these directories of controllers helpers models routes templates and views is that gives you a way to keep your files organized when you're developing your ember j/s app for purposes of this simple tutorial I've kept everything in a couple files all that all the CoffeeScript is in one file and all my view templates are also in another file and that's just like I said because I want to keep the example simple I'm also intentionally not going to put in any sort of validation so apt is coffee is created and this is telling us which files are going to be referred to basically what this is saying is that as you add new JavaScript or CoffeeScript files for these directories you don't need to worry including them they'll automatically be included when the application starts the application J's file that requires the necessary the main top-level files for running member jasi handlebars amber amber data and it creates the application app equals ember application crate that's the main that's a piece of JavaScript code that initializes ember router dot J SS is set up as say M the default right here and this is to be filled in in the same with store it's setting up to be to use a rest adapter by default I'm going to be changing these in the next couple commits so rails G controller static index this is a command that's going to run that's going to create my static controller so once I've got the Ember file is installed I'm gonna create my controller and this is what it looks like the static controller is very simple all it has is one method called index there's a few other files that are created such as the helper which I'm not going to add anything to index.html DRB just has this default find me an app view static index.html the routes file gets the additional controller method get static index there's a couple files and tests but for purposes of this example to keep it simple I'm not adding any tests I'm going to check out this revision and let's make sure we can still start the application so I hit stop restart go over to Chrome and I'm going to hit refresh well nothing happens because the default route is still there there's a few more steps that I need to take before I can run the application in route star RB I'm going to need to add a route to static pound index what that's going to do is that if I put in just if I don't put any URL then this is going to be the default route it's going to go to static pound index the other thing that I need to do to start up the application is I need to set this value in development RB and that's config dot m / dot variant equals colon development that's explained in the ember to toe in the excuse me in the Ember rails instructions this needs to be set notice that this is not optional this absolutely needs to be set and needs to be set in both development dot RB and production RB what I'm going to do now is I'm going to check out this revision I'm going to go over to run I hit stop restart I'm going to go back into Chrome I load up the default route the default path which is nothing and that takes me to static pound index I can also go static index in the same page will load notice there's a couple errors couple JavaScript errors some things are not quite defined yet let's go into the next commit the next commit is I'm going to install the latest versions of ember and ember data and that's done using the command rails generate ember install - - head those instructions are right here in the readme I'm not sure why the minified files are needed given the asset pipeline however they're included and it's best to go along with the instructions for now for member ray at the ember rails project you can see what the file looks like here if I click f4 one highlighting the file and we can see we get the current version number and this is a current version of ember data and this is a current version of the Ember file this can be real important to know what version you're using in case you report any issues on ember the next commit which I'm not going to go to in great detail is the place where I brought over all the Sam all the code that made the static application work that is a code that makes this example work you I'm hosting the starter pack this the Tom Dale tutorial right in my octopress blog which is served on github and the reason why I can do that is that it's completely 100% static which is some JavaScript but it is a fully running example of ember j/s so I'm gonna bring this code the JavaScript code over and I'm going to bring it into the rails for version which includes serialization of course we're not gonna be using serialization first but my idea is let's bring the static application first and then I'm going to convert it so that we can serialize the data so what does it check and look like that check in looks like this I'm not going to go into great detail on what's in the CoffeeScript file or the index.html file the reason why is that the code in these files is carefully detailed in the Tom Dale tutorial and I've already given instructions on how to set this up so you can run this in your own environment what I'm going to focus on is what it takes to convert this to using rails for for persistence i've synced up the files to this commit and i'm gonna go over to the run tab i'm going to stop i'm going to restart the application and let's see what we have what we've got here is the same exact example that I had when I showed you the static example a few seconds ago I can click on a post I can click edit a post I can click done now the post is edited but if i refresh the page the persistence there's no persistence so what this is is just completely 100% Stata completely 100 stations served by rails for the next part of what I'm going to show you is now we've got the static part what is it going to take to use rails for persistence I'm gonna add the next check-in shows what happens when I add the post model this is very simply what happens if you do rails generate model post and the attributes very simple that generates a post @rv file which this extends active record we generate a migration these are the two table columns that are added the schema is generated I'm going to add in this commit a rake task create some sample data just like we have the fixtures file the JavaScript fixtures to make testing a bit easier it's nice for a rake task and have a few sample records what this does is what calls a schema load invoke the schema load invoke resets the schema essentially deletes all the records in the schema I've put in a little check here if you try to run this in production you have to use the - - force option and it calls load data and load data calls load rails and load octopress so it just includes some very simple data so this commit right here where I create the model it's definitely not going to be enough to restart the application there is no controller and there's no hookups into mas we're going to need to add the controller and then we're going to need to make some changes to the coffee script let's take a look at the next commit the next commit I updated to fetch data from the database and persist the changes I'm adding the controller and the serializer for posts and the resource for posts and routes so what exactly does this mean let's first take a look at what happens with the rails back-end and then we'll look at the CoffeeScript so the post controller this file is added and the file is a very simple pretty much a template rest controller with index show create update and destroy the big difference in this file compared to a rails 3x is strong parameters we have post params and what that looks like is doing something like this when you call update you're going to say respond with post out update and before we would have something like params post right here but instead we have post params notice the create method I haven't updated that because I haven't implemented the feature of using create so post params that calls this method parameter post permit and these are the attributes that are allowed what does the serializer look like the sterilizer is extremely simple it just has the attributes we want to sterilize and when is the serializer used the serializer is used from the post controller because we have respond to json so by default when we say respond to json and then we say respond with we're gonna use a sterilizer notice that the post controller will use the post serializer there's no specification file that where you save that the post controller uses the post sterilizer this is all done through the naming of the objects now what happens to the coffee script to make persistence work we switch over from the sure adapter to the rest adapter and then when you say done editing we say get store commit and that's it there's nothing else that had to be done in the CoffeeScript file change the adapter and add in a commit to save I'm going to sync up this revision and let's see if this functionality works check out revision I go to run stop restart what I've got now is I've got one of the records that I had in the example that I was experimenting with before right here so I can edit this record hello world this is some gold text and this is a header as you can see we've got the markdown updating in place below one thing I want you to notice is when you edit the title everywhere this title is displayed on the screen which is right here and right here it updates as well so that's kind of neat and that's an example of the model-view-controller feature that ember gives you I'm gonna hit done and that should be calling commit I'm gonna hit refresh and let's see if that stayed around well it doesn't look any difference and that's because it was persisted let's take a look in the rails Council and let's see if we could see anything there that's interesting I scroll through the rails Council and I find this interesting bit started put post notice it says processing the update post controller pound update is JSON here's a parameter as a couple extra parameters were passed such as the author and published at which weren't used and then the post is updated where a title intro and extended and updated at are set that's fabulous with such a small amount of code I'm gonna review this one more time just to show how simple this was just says tiny bit of code where we said get store commit we added this very simple controller which is a template rest controller added a simple serializer which again is very and then we added a simple serializer which simply lists the attributes and then I had added the resource for post in the routes that's all it took to make serialization work for that example that we have where you can only edit the next step I want to show you is persistence working with a few additional features which is mainly the ability to add and delete new posts so what's this going to look like when we're done we're going to have an add post button if you click on a post you have the ability to delete it if I want I can click on this post on here delete this this is actually really deleting it right on Heroku I know delete that one and I'll delete this other one and we're going to make the ad post work let's take a look at the code to make this happen let's look at the CoffeeScript file first we're gonna have a new route and it's good this new route is going to be to create the new record and it's very simply and it has a model property which is AB dot post I create record and we specify the default values for some of the properties take a look at the blog posts there's something in there that you can call also in the inn when you call new route you can also call or excuse me when you call route extend you might be setting up the controller's another thing that you might be doing and if you do that then this model code doesn't run correctly I didn't quite troubleshoot exactly what caused it to go wrong but if you do call setup controller you'll have a very very confusing time so if you follow this example it works just perfectly at the bottom for the app router map I added route new and notice route new is nested inside a post the next part is a new controller for the post I'm gonna need a save and a cancel so when you add the record you will either you can click save or you can click cancel so when you save it does it get store commit just like for the Edit and then transition to route post this not get content and that's because once it's saved we can click on the well show is some real URL for the post if you cancel we'll try delete record and then we'll try rolling back the current transaction and the will transition to the route for a list of all the posts since we don't have a specific post to show after we cancel the delete functionality will be a call to delete record and then to commit and then will also transfer transition to the list a post and that's it for the most part to get this work there's a couple little tweaks to the helpers that I did in case the input is null let's see what had to change to for this to work in the controller and the model in the controller what I did was added a few different features for the allowable parameters so I had published at an author and the reason why is when I make a new record I'm going to set those in the JavaScript on the client that could have been done on the server as well and the create method is going to have to use the strong parameters feature I'm gonna check out the revision stop the current a server restart the server and I'm gonna refresh the page we've got an outpost button so next I'm going to show you the model change that I added I changed to make the example work for serialization and that is simply I want to validate the presence of published add an author now what happened to the templates so here's where I add the button notice it says link to post new notice that the button to add a post is actually a link to a new URL the reason why is that we want a new URL for a new post it's not a simple action where we want the URL to say the same but we want a different URL for making a new post for saving and canceling those will be plain buttons so for these we call button action save and but an action cancel another thing I did in the file is I've refactored this template here which is the template for post because I wanted to reuse it for adding so what I'm doing is I created a partial post edit and that's what's down below it's post-edit and that was there before and then there's a partial post view and this is a new template I just added right there this code here for the view part was originally just in the post template so now what I've got is I've got mine posts new and my post and notice that the ID there corresponds to the route I've got those using those two partials so the post new uses the post added partial then shows a couple buttons and then it goes to and then it shows the post view for editing there's a state if editing then show the done editing button otherwise show edit and delete buttons and don't forget if you're editing show the partial for post edit and then show the post view partial let's see if this works I'm going to refresh I click on the add post so this looks great I can make a new post I hit create and there it is let's try deleting the post delete seems to work you so you make a new post this is italics that shows up correctly I hit create it looks good but there's a problem the URL at the top is set to post null note if I click add post the URL is set to post new this is exactly what we want but why is the post URL getting set to null and the answer is actually I've got the answer right here in the next change so here's the issue we call get store commit that's going to be an asynchronous call and if we call transition to route immediately then this stock get content has a null value so we can't do that instead what we need to do is we need to put the code that's going to respond to the commit into this transition after save and that's going to call the transition to route and this is going to observe Content ID so when Content ID changes the transition after save this method will run and the correct behavior happens let's see if that worked so I check out the revision I stop I restart and I'm going to refresh the page now I'm going out a post I get create and look at it now it says post 8 so when I click on the post on the left notice that the post ID shows up I click another post and it shows post 8 super so once again that simple change was taking out the call right after the commit because it's asynchronous and moving it into transition after save which is going to observe the Content ID this essentially is like a future call and this happens at the right time once the ID is properly set from the server for the most part this is working pretty darn good and this is ready for a deployment on Heroku let's take a look at what it takes to get this work out berroco keep in mind that the commit descriptions I've put have some nifty tips in here so this will tell you what's needed the article that I wrote has additional tips on getting the code set up for Heroku which involves change a few gems switch from sequel light to Postgres I'm going to use a puma web server as that's what the example that i that i emulated was using and it works seems to work great and we're going to need to update the production RB file because like I said the instructions and the ember rails readme file are not correct those steps are not optional and it's a little bit can you get this confusing error which I put in the article so that if you did see that error and you did a search for it you might come up with my article and you'll see that the solution is is that you need to put production in your excuse me config ember variant production in production RB let's take a look at these changes so I update my database yeah mo because you're going to need to do that for Postgres you need to make a few gem changes these gems for Heroku are there's a link in there's a link in my blog article for the details of putting these Heroku gems in these are necessary here's the gem for Postgres and I comment out the sequel Lite gem I also put back in gem handlebar source as absolutely needed in there for the hero pre-deployment I also had the gem puma and it's critical to specify the ruby version of 2.0 if you're using rails 4 here's a simple proc file I added to run puma and that's something that Heroku will use to start the puma server here's a change to production dot RB that's necessary config ember variant equals : production if you don't do this or get a very confusing error message on Heroku the next change in mate reproduction RB was that I couldn't when I was running the rails task it didn't have access to the models and I discovered through another an article I found on Google is that this is necessary at least right now in rails 4 config dot dependency loading equals true if dollar rails rate tasks so that's a global flag that said if you're running a rape rape task the reason why this seemed to change in rails 4 is that the config thread-safe option is specified and by by default it's true for in rails 4 and by default it was false in rail straight so once you get that going you can deploy to Heroku and let's see what it looks like so this showed you a little while ago here's the app running on Heroku I can edit this you I can hit done and it's all saved it's all persisted in the database this works just like I showed you that was run how it was running locally however there's a slight bug in the application that I just I realized after my initial commits to Roku in my creation of the article it's an interesting bug it will show you quite a bit more about how ember persistence works so I'm going to add a new post here's a new post the problem is right now if you have posts new up there is what happens if you click the post over on the left side you haven't saved it yet if you look in the lower left corner you can see that the URL is going to be post null so I click on that and it's post null so some things aren't working right so let's fix this problem so that we don't end up with this post null because that's really an error because sooner or later someone's gonna refresh the page on that and what its gonna be it's gonna be an error right here uncaught so the error is showing right there and I could actually bring it up in the chrome debugger this is the key change for this change actually made a very detailed commit message that it's definitely well worth reading it was not obvious at all what I needed to do based on the original Tom Dale article in terms of what I needed to do to make this to make this work there's a great great Stack Overflow article on what's needed so here's a change so here's the change I had to make in the JavaScript to make this work it's actually a pretty simple change in terms of the number of lines of code to make but it's a little bit subtle what I'm doing is I'm gonna add a post controller I'm gonna it's gonna actually sort the post now as well so that the newest post will show up first and it's gonna have a property called filtered content that's the name that I'm giving it and I'm gonna use that in the view it gets arranged content and it's critical to get a range content and not content if you want to keep the items sorted and then here's the filter and what the filter is gonna do is that it's going to include the objects so long as they're not dirty so content filter it passes in the item and the index and item get dirty will return true for the for the dirty object and then it then we're gonna say when it's not that so this is going to exclude the new object which is dirty and the keep thing to do is you have to listen on this property arrange content dot at each and that's the secret sauce that makes the the listings update when you save the new record the next change is the change we're going to make to the template before we are saying for each record and model but now what we're gonna do is we're going to say for each post in filtered content I believe that post is probably just the name that's given for each of these in filtered content however it could be specific that it's actually related to the fact that this is a post type in any case it's a good idea to name it each post so that we know what it is this part gets a little bit confusing link to post post opposed to before it was just link to post and this so what does this mean what's happened notice before we were going through the model and now we're going to be going through each of the posts so the first parameter here in the link two is going to be the route so we're going to link to the post route over here we're gonna link to the post route as well that didn't change the difference says is before we were calling it with this and now we need it to call it with the post so I believe that this post here the second part is a reference to this each post so this part here is a reference to when you're going through each model also note that we had to change title to post title before it was just title and now it's post a title so what this kind of means is that before was kind of like this title because we had this model object and then so the title is implicit on whatever the current object is now we're being much more explicit each post so now we're going to call post our title and we're gonna call post author let's see if this works I'm gonna check out this revision I'm gonna go over to run notice that we had this message before when the post was an all active record not found so we definitely don't want to be passing putting that null in the URL so I stopped the application and I started up again I'm going to refresh the browser and a click Add post hello notice now we're not getting the new record is not showing up on the left-hand side all we have is post new I hit create and tada it showed up over on the left side I'll do this one more time another post I hit create and it shows up on this side after I save it and it shows up in the top so that's kind of neat what I've done so far is I've actually completed the example we've gone through all the changes that were necessary to get the app running to get a simple blogging app running and even get it deployed on Heroku I've got all the steps laid out in my blog article and I think the git repository will be quite useful thank you for listening bye bye

Channel: Justin Gordon

Views: 11,738

Rating: 4.8888888 out of 5

Keywords: EmberJs, Rails, Rails4, CoffeeScript, SinglePageApplications, Ruby On Rails (Software), Tutorial

Id: ac1mYhCMRNc

Length: 42min 53sec (2573 seconds)

Published: Fri Jun 14 2013