Increase in usage of JavaScript in modern applications demand developers to write maintainable code, separate concerns and improve testability. JavaScript is a \u201cclass\u201d less language and it was not designed to support Object Oriented Programming, however you can achieve similar results by workarounds. So if you are a developer from an Object Oriented Programming world, then you will find it hard until you get used to it. Though there are some DOM manipulation libraries like jQuery which simplifies client side scripting of HTML, they actually do not solve the problem of effectively handling separation of concerns. You will end up writing lot many jQuery selectors and callbacks to keep the data in sync between the HTML, JavaScript and the data fetched from the server and we\u2019re still stuck with the Spaghetti code<\/a>.<\/p>\n\n\n\n Fortunately there are a few libraries and frameworks that come to rescue. Let\u2019s explore few concepts and libraries that assist in structuring JavaScript applications!<\/p>\n\n\n\n This post is the first part of a blog series on JavaScript Frameworks and Libraries out there and I will be exploring BackboneJS here. Stay tuned for others!<\/em><\/p>\n\n\n\n Though all the frameworks out there somewhat tries to be MVC but they do not necessarily follow the pattern strictly. The idea of all the patterns is to separate Model, View and Logic that hooks the two behind which is the controller. However BackboneJS embeds the controller logic in the view itself though it efficiently maintains the separation. On the other side we do have other libraries which implement Model-View-Presenter(MVP)<\/a> and Model-View-ViewModel(MVVM)<\/a> pattern. For this reason we will refer these frameworks as MV* implementation.<\/p>\n\n\n\n Model \u2013 View \u2013 Controller is an architectural pattern that has been around for a long time and is widely used in server side programming. There are a few frameworks like ASP.net MVC, Ruby on Rails etc. which help web developers to easily program them.<\/p>\n\n\n\n Model<\/b> \u2013 refers to application data and business rules. (a.k.a domain model, entities)<\/p>\n\n\n\n View<\/b> \u2013 what user sees! (HTML page in the web browser)<\/p>\n\n\n\n Controller<\/b> \u2013 mediator between the two. Manipulates the model based on the user interaction. It handles all the logic.<\/p>\n\n\n\n Image Source: Wikipedia<\/a><\/p>\n\n\n\n Building single-page applications using JavaScript are getting popular these days and good examples of them are GMail and Google Docs. When you set out to build these type of applications you will most likely invent many of the pieces that make up an MV* coding paradigm. So instead you can make use of some of the famous libraries such as BackboneJS<\/a>, KnockoutJS<\/a>, AngularJS<\/a>, EmberJS<\/a> …. Let\u2019s explore these frameworks in detail starting with BackboneJS. <\/p>\n\n\n\n Before you pick to work on a particular JavaScript Framework or a Library, it\u2019s important to understand the difference between the two. Libraries<\/strong> just fit into your existing architecture and add a specific functionality whereas a Framework<\/strong> gives you an architecture and you will need to follow the rules. To make it simpler for you \u2013 Backbone and Knockout are JavaScript libraries and Ember and AngularJS are frameworks. As we explore them you will see the clear difference.<\/p>\n\n\n\n Backbone is a lightweight JavaScript library created by Jeremy Ashkenas<\/a> who is also known for CoffeeScript<\/a>. It is designed for supporting Single page web application and has a dependency on UnderscoreJS<\/a> library which provides utility functions for common JavaScript tasks.<\/p>\n\n\n\n With Backbone, data is represented as Models, which can be created, validated, and saved to the server. Views display the model’s state and it re-renders itself when a change is triggered(via a “change” event) in the model due to an UI interaction. This way Backbone provides a structured approach of keeping the data in sync with the HTML UI.<\/p>\n\n\n\n Some of the major websites that used Backbone include USA Today<\/a>, LinkedIn Mobile<\/a>, Hulu<\/a>, WordPress<\/a>, Foursquare<\/a>, Bitbucket<\/a>, Khan Academy<\/a> and more..<\/a><\/p>\n\n\n\n Backbone has a dependency on UnderscoreJS<\/a> or Lo-Dash<\/a> for utility functions and relies on either jQuery<\/a> or Zepto<\/a> for DOM manipulations. So make sure you add them to your page.<\/p>\n\n\n\n To create a Model class of your own, you extend Backbone.Model and pass a JavaScript object to the constructor and set the attributes. You can then easily retrieve the values from a get<\/strong> function. You can alternatively set the attributes using a set function.<\/p>\n\n\n\n Set a template first:<\/p>\n\n\n\n Set a container for rendering:<\/p>\n\n\n\n Define a view in the script:<\/p>\n\n\n\n Views in Backbone are almost more convention than they are code so you will have to rely on some JavaScript templating library like Underscore templates or Mustache.js to do a cleaner separation of the UI. In the above example I have used Underscore\u2019s templating solution to achieve the separation. <\/p>\n\n\n\n Your own custom Views can be created with the help of Backbone.View.extend. There are few basic properties that you must be aware of to set the View.<\/p>\n\n\n\n As stated in the Backbone\u2019s documentation \u2013 the View class can also be thought of as a kind of controller dispatching events that originate from the UI, with the HTML template serving as the true view<\/em>. This leads to an argument<\/a> whether or not Backbone follows real MVC principles. However if you don\u2019t learn it as a MVC library and give importance to the way it separates concerns, it should be fine.<\/p>\n\n\n\n Some time ago Backbone did have its own File Size:<\/strong> 6.3Kb \u2013 minified and 56kb with Full Source and comments.<\/p>\n\n\n\n Download:<\/strong> Backbone website<\/a><\/p>\n\n\n\n Annotated Source:<\/strong> http:\/\/backbonejs.org\/docs\/backbone.html<\/a><\/p>\n\n\n\n CDN:<\/strong> cdnjs<\/a>, jsdelivr<\/a><\/p>\n\n\n\n Who is using it?:<\/strong> Check out their examples section<\/a><\/p>\n\n\n\n So that was a quick introduction to BackboneJS and an explanation on JavaScript frameworks in general. In upcoming posts you will be introduced to Ember, Knockout and Angular as well. So stay tuned!<\/p>\n\n\n\n If you have any questions write to me nish@infragistics.com<\/a> or find me on twitter @nishanil<\/a><\/p>\n\n\n\n For this post, I am assuming you are a programmer like me and design is a planet just outside your universe. If you are from the design planet, you too can read on; may be there is something for you too!<\/p>\n\n\n\n Writing CSS is fun, exciting and easy until your website grows fat with pages and complicated layouts. If you have ever tried fixing a layout in such a page \u2013 you know what I mean. Did I talk about fixing a layout? Oh yeah thanks to all the browsers.<\/p>\n\n\n\n Many at times while writing CSS I wished I could write it more programmatically than just styling them. For e.g. If CSS had allowed variable declarations, I could have simply held the values in variables, perform few operations and re-use them in properties. But that\u2019s too much to ask for from a stylesheet language which should just do styling!<\/p>\n\n\n\n Fortunately there are a few preprocessors like Sass<\/a> & LESS<\/a> that nicely extends CSS and adds everything a programmer ever wanted. After doing couple of research I picked up LESS to see how it works. I spent a few hours re-styling some of my demos with LESS and I am must say I am thoroughly impressed with this language. So here I\u2019m explaining you about LESS.<\/p>\n\n\n\n LESS is a dynamic stylesheet language that extends CSS and adds nice features like variables, mixins, operations and functions to it. More importantly it takes fewer efforts for developers to write complex CSS and build amazing looking websites real fast. LESS uses existing CSS syntax that makes learning a breeze and you can always fall back to CSS.<\/p>\n\n\n\n LESS\u2019 first version was written in Ruby and was used as a server side language which upon compiling emitted CSS. However in the later versions, use of Ruby is deprecated and replaced by JavaScript. Adding LESS.js JavaScript file to your HTML page allows real-time compilation within browsers. It also supports server side compiling with the help of Node.js<\/a> making it easier for developers to choose between the two.<\/p>\n\n\n\n All LESS files should have the extension \u201c.less\u201d and you may have them under CSS directory of your webserver.<\/p>\n\n\n\n Add the following lines of code to your HTML page to ensure Pre-Compiling of CSS happens in your browser:<\/p>\n\n\n\n Note: If you working on a local file system i.e. if you are accessing the page using \u201cfile:\/\/\/\u201d on Chrome or IE you may incur an error of \u201cCross origin requests are only supported for HTTP\u201d or \u201cAccess Denied\u201d respectively. These are some security related errors and I did not find a way to get rid of them. Host them on a development server and you will see this go away. However I did not find any issues with Mozilla Firefox.<\/em><\/p>\n\n\n\n If performance is what running in your mind then you can look at compiling these files on the server side. First, download and install Node.js, then using npm<\/a> download the less compiler(lessc.cmd<\/em>).<\/p>\n\n\n\n To compile use this command:<\/p>\n\n\n\n For more options like CSS minifying, run lessc<\/em> without parameters.<\/p>\n\n\n\n There are few nice editors out there that will let you live compile these files. For e.g. I use WebStorm which nicely compiles LESS to CSS as I type. If you are on a large project and most of your developers are comfortable on LESS then you can add the sever side compilation step to your build task.<\/p>\n\n\n\n Now that you have know how to make \u201c.less<\/em>\u201d files and compile them to CSS, let\u2019s look at this language in detail.<\/p>\n\n\n\n As mentioned earlier variables are one nice feature to have in stylesheets. LESS let\u2019s you add variables with the help of @ symbol<\/em> and use them into properties. Find below an example where I set background-color and color of the body with the help of variables.<\/p>\n\n\n\n These variables can be now re-used in the rest of the code and any change that you make to color will apply to all. CSS codes can co-exist with LESS \u2013 If you notice only two of the properties were set by variables and the rest is CSS.<\/p>\n\n\n\n Now that you know variables are a possibility in stylesheet, you must be happy to know that you can perform operations on them. It\u2019s easy! Here\u2019s is an example of how to do it:<\/p>\n\n\n\n Have a look at how @backgroundColor<\/em>, @color<\/em> and font-size<\/em> gets the calculated value from an operation. Find below the output that gets generated.<\/p>\n\n\n\n Output:<\/p>\n\n\n\n Mixins help you reuse the whole bunch of properties from one ruleset into another ruleset. Here\u2019s an example:<\/p>\n\n\n\n In the above code you can see how .gradients<\/em> ruleset is re-used into #body<\/em>. It\u2019s a pretty nice feature, think about how less code you need to write now!<\/p>\n\n\n\n Like every other programming language, LESS provides variable scoping too. Variables are looked up locally first and when not found it will search globally. In the above example you can see that the @baseColor<\/em> is being used in both .gradients<\/em> and #body<\/em>. If you have locally scoped variables like @gradientStartColor<\/em> and @gradientEndColor<\/em> they are not accessible outside the scope unless they are mixed in. In the above example #body<\/em> can access those variables inside since .gradients<\/em> is referred.<\/p>\n\n\n\n Check out Scope<\/a> for more info.<\/p>\n\n\n\n This is special type of ruleset which can be mixed in like classes, but accepts parameters. Here\u2019s an example that sets up border-radius for different browsers.<\/p>\n\n\n\n If you look at #body<\/em> it calls without parameters that\u2019s because LESS allows to set default values of parameters which in this case is 4px<\/em>. Look at #sidebar<\/em> for call with parameters. You can also set multiple parameters, check this out<\/a> for more information.<\/p>\n\n\n\n LESS provides few helper functions for transforming colors, string manipulation, and do math. Find below an example from the LESS documentation which uses percentage to convert 0.5 to 50%, increases the saturation of a base color by 5% and then sets the background color to one that is lightened by 25% and spun by 8 degrees:<\/p>\n\n\n\n Check out Function Reference<\/a> for details.<\/p>\n\n\n\n By now you would have a fair idea of what LESS brings to the table. But be aware that LESS is not the only CSS preprocessor. There is Sass which stands for Syntactically Awesome Stylesheets<\/a> and few others but they aren\u2019t popular. There are various blogs out there which will tell you some good comparison between the two. I suggest you try both and stick to the syntax that you like! After all they emit CSS Have a feedback? Find me on twitter @nishanil<\/a><\/p>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" JavaScript has become one of the most popular programming languages on the web. At first, developers didn\u2019t take it seriously, simply because it was not intended for server side programming.<\/p>\n","protected":false},"author":21,"featured_media":2210,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-476","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/476","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=476"}],"version-history":[{"count":2,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/476\/revisions"}],"predecessor-version":[{"id":2027,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/476\/revisions\/2027"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/2210"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=476"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=476"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}What Is MV*?<\/h2>\n\n\n\n
What Is MVC?<\/h2>\n\n\n\n
![\"MVC-Process\"](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/nanil\/metablogapi\/6472.MVC-Process_thumb_752E7E98.png\" "\\"MVC-Process\\"\/")
<\/a><\/figure>\n\n\n\nMVC In JavaScript?<\/h2>\n\n\n\n
Framework Or Just a Library?<\/h2>\n\n\n\n
Hello Backbone<\/h2>\n\n\n\n
![\"Backbone_logo_horizontal\"](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/nanil\/metablogapi\/7651.backbone_thumb_257E5D86.png\" "\\"Backbone_logo_horizontal\\"\/")
<\/a><\/figure>\n\n\n\nGetting started with Backbone<\/h3>\n\n\n\n
Script Dependency<\/h4>\n\n\n\n
<script type=\"text\/javascript\" src=\"..\/common\/jquery-1.8.3.min.js\"><\/script>\n<script type=\"text\/javascript\" src=\"..\/common\/lodash.js\"><\/script>\n<script type=\"text\/javascript\" src=\"js\/backbone.js\"><\/script><\/pre>\n\n\n\n
Backbone.Model<\/h4>\n\n\n\n
$(function(){\n var Person = Backbone.Model.extend({});\n var person = new Person({name: \"James\", age: 51});\n var name = person.get(\"name\");\n var age = person.get(\"age\");\n console.log(name + \":\" + age);\n});<\/pre>\n\n\n\nBackbone.View<\/h4>\n\n\n\n
<script type=\"text\/template\" id=\"person-template\">\n <div class=\"view\">\n <p>Name: <input type=\"text\" value=\"<%- name%>\"\/><\/p>\n <p>Age: <input type=\"text\" value=\"<%- age%>\"\/><\/p>\n <\/div>\n<\/script><\/pre>\n\n\n\n
<div id=\"container\">Your content will load in a bit..<\/div><\/pre>\n\n\n\n
\/\/define view\nvar AppView = Backbone.View.extend({\nel: '#container',\nmodel: person,\ntemplate: _.template($(\"#person-template\").html()),\ninitialize: function(){this.render();},\nrender: function(){this.$el.html(this.template(this.model.toJSON()));}\n});\n\/\/ initialize view\nnew AppView();<\/pre>\n\n\n\n\n
Backbone.Controller<\/code>, however it was renamed to Router<\/span> as the naming for this component didn’t make sense from the way it was being set to use.<\/p>\n\n\n\nFile Size, Download & Other useful links<\/h3>\n\n\n\n
Stay Tuned<\/h2>\n\n\n\n
![\"IgniteUI_Banner_300x250_a2\"\/](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/nanil\/metablogapi\/5807.css-less-nnish_thumb_3EEF540F.jpg\")
<\/a><\/figure>\n\n\n\nSo LESS<\/h2>\n\n\n\n
Adding Less.js \u2013 Client-Side Usage<\/h3>\n\n\n\n
<link rel=\"stylesheet\/less\" type=\"text\/css\" href=\"css\/style.less\"\/>\n<script src=\"js\/less-1.3.3.min.js\"><\/script><\/pre>\n\n\n\n
Server Side Usage<\/h3>\n\n\n\n
lessc styles.less > styles.css<\/pre>\n\n\n\n
Variables<\/h2>\n\n\n\n
@backgroundColor: #333;\n@color: #fff;\n\nbody {\n background-color: @backgroundColor;\n color: @color;\n border-top: solid 10px #000;\n font-size: .85em;\n font-family: \"Segoe UI\", Verdana, Helvetica, Sans-Serif;\n margin: 0;\n padding: 0;\n}<\/pre>\n\n\n\nOperations<\/h2>\n\n\n\n
@baseColor: #000;\n@backgroundColor: (@baseColor + #333);\n@color: (@backgroundColor \/ 3);\n@font-family: \"Segoe UI\", Verdana, Helvetica, Sans-Serif;\n@font-Size: 1em;\n#body {\n background-color: @backgroundColor;\n color: @color;\n border-top: solid 10px @baseColor;\n font-size: (@font-Size - .15em);\n font-family: @font-family;\n}<\/pre>\n\n\n\n#body {\n background-color: #333333;\n color: #111111;\n border-top: solid 10px #000000;\n font-size: 0.85em;\n font-family: \"Segoe UI\", Verdana, Helvetica, Sans-Serif;\n}<\/pre>\n\n\n\nMixins<\/h2>\n\n\n\n
@baseColor: #000;\n@font-family: \"Segoe UI\", Verdana, Helvetica, Sans-Serif;\n@font-Size: 1em;\n\n.gradients {\n \/*local scoped variables*\/\n @gradientStartColor: #eaeaea;\n @gradientEndColor: #cccccc;\n background: @baseColor; \/* variable from global scope *\/\n background: linear-gradient(top, @gradientStartColor, @gradientEndColor);\n background: -o-linear-gradient(top, @gradientStartColor, @gradientEndColor);\n background: -ms-linear-gradient(top, @gradientStartColor, @gradientEndColor);\n background: -moz-linear-gradient(top, @gradientStartColor, @gradientEndColor);\n background: -webkit-linear-gradient(top, @gradientStartColor, @gradientEndColor);\n}\n\n#body {\n .gradients;\n border-top: solid 10px @baseColor;\n font-size: (@font-Size - .15em);\n font-family: @font-family;\n}<\/pre>\n\n\n\nVariable Scoping<\/h3>\n\n\n\n
Parametric Mixins<\/h2>\n\n\n\n
.border-radius (@radius: 4px) {\n border-radius: @radius;\n -moz-border-radius: @radius;\n -webkit-border-radius: @radius;\n}\n#body {\n .gradients;\n .border-radius;\n border-top: solid 10px @baseColor;\n}\n#sidebar{\n .border-radius(25px);\n background: #eee;\n}<\/pre>\n\n\n\nFunctions<\/h2>\n\n\n\n
#sidebar{\n width: percentage(0.5);\n color: saturate(@baseColor, 5);\n background-color: spin(lighten(#ff0000, 25%), 8);\n}<\/pre>\n\n\n\nSummary<\/h2>\n\n\n\n
![\"Smile\"](\"http:\/\/www.infragistics.com\/community\/cfs-file.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/nanil.metablogapi\/2112.wlEmoticon_2D00_smile_5F00_53EFB27E.png\")
<\/p>\n\n\n\n![\"0640.IgniteUI_Banner_728x90_b\"\/](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/nanil\/metablogapi\/2703.0640.IgniteUI_Banner_728x90_b_32FC3FD7.jpg\")
<\/a><\/figure>\n\n\n\n