Welcome to weblogs.com.pk Sign in | Join | Help

Getting Started with Ember JS

In my opinion, finding the sweet balance between the two extremes; fully compiled web app (well produced music record) and javascript based dynamic web apps (live performance); is the right way to go!

A while ago; we were asked to add new features into an existing Web Forms app; we decided its time to explore things outside of the comfort zone of the typical enterprise development team and do things the “modern-way” Thanks to One ASP.NET theme of .NET v4.5; we can have Web Api Controllers in the same Web Forms project / assembly! I will cover getting started with Ember JS in an ASP.NET Web Forms for this post. I will not be using Ember Data or Ember CLI. We will try to remain true to modern norms for web development; and this is why we are using NODE and not NUGET

  • If you dont have the Node; Install Node.js; this is where cheese is these days!
  • Optionally Install Power Commands for Visual Studio; it will give us option to open Command Prompt at our project folder using context menu
  • Installing Node for Windows will create nodevars.bat that we can run to set Environment variables required for Node; next we need to install Bower; a npm module; think of installing Node modules as deploying assembly into global assembly cache and Bower for local assemblies; installing with -g install the node module globally (usually %appdata%\npm\node_modules)
  • We will then initialize our project directory for Bower; this will create bower.json file; think of it as your web application C#/VB project file
  • Next we will install Ember using Bower with dash-dash-save option; this will add ember dependency into the bower.json file

After the above steps; we will have couple of new Node Modules; usually in %appdata%\npm\node_modules and our project folder will have bower_components folder and it will have the bower modules we have just added; lets copy the required files from bower_components to scripts folder of our project; so we can add and reference them into the ASCX / ASPX like other JavaScript files. Include bower.json file into the project as well so it gets versioned accordingly. Doing this allow us to have all the required files in the source control system and we dont need to make any change in the build system!

Note that I am using ember.debug.js; and specifying debugMode to true and to log things when creating Ember Application variable; doing this we will be seeing error logs in the Javascript console window!

We can learn from Console; that it needs application template; lets add that and the “test” template to try out the transition, route for which we already have added

If we add break points in code behind; we will learn that Ember is doing template transitioning without hitting the break points! With such Single Page Application techniques and JavaScript frameworks based apps; we can have islands of SPAs in our existing web forms application and can give these apps a new life!

Published Monday, February 15, 2016 4:53 PM by khurram


No Comments

New Comments to this post are disabled