background preloader

A comparison of Angular, Backbone, CanJS and Ember - Sebastian's Blog

A comparison of Angular, Backbone, CanJS and Ember - Sebastian's Blog
Selecting a JavaScript MVC framework can be hard work. There are so many factors to consider and so many options out there that selecting a framework can be overwhelming. To have an idea of all the possible alternatives have a look at TodoMVC. I have had the opportunity to use four of these frameworks: Angular, Backbone, CanJS and Ember. So I decided to create a comparison to help you decide which one to use. I will go through several factors that you might want to consider when choosing one. To each factor I have assigned a score between 1 and 5. Features There are really important features a framework should have to provide the necessary foundation to build useful applications. Observables: Objects that can be observed for changes. Routing: Pushing changes to the browser url hash and listening for changes to act accordingly. View bindings: Using observable objects in views, having the views automatically refresh when the observable object change. Scores Flexibility Angular Backbone CanJS Ember Related:  Comparisons of Angular -vs- other javascrpt MVC frameworksjs

Backbonejs vs Angularjs : Demystifying the myths | Next Big Thing I love the way how each and every discussion turns into the war of the frameworks. I have worked with BackboneJS and AngularJS quite extensively and have come across most of their short comings in production. So, you dont really have to take this analysis with a grain of salt. We are building Dhi – An Artificial Intelligent Assistant to help you build web apps. NOTE : I am not trashing Backbone. I know that people in general, still choose Backbone over Angular because it seems to be the safer choice, because you cant find as many X-framework developers as Backbone etc etc.. Here are the myths and my explanations to counter them. Backbone is very small / compact. One of the first points that people quote, when they talk about the advantages of Backbone is its compactness. Angular ( 1.0.3 ) is 77KB minified. Backbone by itself is around 18KB minified (link). To note here, Backbone has a much stronger dependency on JQuery than Angular. Backbone is minimalistic. 1. 2. or It just works. 3. 4.

Automatic Table of Contents Any long page of content with distinct and well marked up content can benefit from a table to contents. A table of contents provides a quick way to jump down the page to the desired section. Of course you can create a table of contents manually, but it may be smart to build it dynamically on-the-fly with JavaScript. This is true for several reasons: It's easier - write the JavaScript once and it can create the Table on Contents on every page you need it.It's more reliable - the JavaScript isn't subject to authoring errors.It's still accessible - A table of contents is good for the general concept of accessibility, but it is a bonus (not having it doesn't ruin the page) and nearly all screen readers run JavaScript. This kind of thing has been done many times and many ways. HTML: Headers and IDs A long page of different parts you wish to link to could be marked up a bunch of ways. <article><h3 id="question-one">Title of Question</h3><! A link like this: A list in that <nav>? Demo Share On

AngularJS vs Ember - Evil Trout's Blog Recently I got together with some local developers to discuss client side MVC frameworks. We ended up discussing many of the differences between AngularJS and Ember. Discourse is an Ember application and has been since the first prototype, so I have a lot of experience with it. However, it became clear during the conversation with my peers that there was a lot about AngularJS I didn’t know. There is evidence that AngularJS is beating out Ember in terms of developer mind share: there are more Stack Overflow questions dedicated to AngularJS. I decided to take some time to seriously investigate AngularJS and see what all the fuss was about. I have a good idea now why AngularJS is gaining momentum: it is simpler. The pitfalls of simplicity A few years ago, many Rails developers I knew were excited about Sinatra. Framework simplicity is good if your application is meant to be simple. Ember has more concepts to learn and more to wrap your head around than AngularJS. What’s an AngularJS Model?

The 10 hottest JavaScript framework projects ( - Software ) Trying to decide which JavaScript UI framework will best meet the needs of your project and organization? With 10 strong contenders, there's a lot to consider. Over the past few years we've seen tremendous growth in UX libraries and frameworks -- most of which are open source. [ How much do you know about this stalwart developer tool? Earlier this year, I had the opportunity to do an analysis of the fastest-growing open source projects started in 2012, and I was struck by the number of JavaScript projects on the list. Which projects rose to the topThis analysis digs into the communities behind the top 10 open source projects spanning UI libraries, frameworks, and full-stack frameworks that include server-side runtimes. My goal was to paint a picture of the communities surrounding these projects, specifically looking at size and growth, in an effort to correlate the data against the popularity and success of individual projects.

Rich JavaScript Applications – the Seven Frameworks (Throne of JS, 2012) It’s no longer good enough to build web apps around full page loads and then “progressively enhance” them to behave more dynamically. Building apps which are fast, responsive and modern require you to completely rethink your approach. The premise was to take the seven top JavaScript frameworks/libraries for single-page and rich JavaScript applications — AngularJS, Backbone, Batman, CanJS, Ember, Meteor, Knockout, Spine — get the creators of all of them in one location, and compare the technologies head to head.* Disclaimer: I was there to represent Knockout, so obviously I’m not neutral. * Yes, I know that’s eight frameworks, not seven. TL;DR Executive Summary For many web developers, it’s now taken for granted that such client-side frameworks are the way to build rich web apps. Technologies: Agreement and Disagreement As each SPA technology was presented, some fairly clear patterns of similarity and difference emerged. Agreement: Progressive enhancement isn’t for building real apps. Meteor

Printing The Web | drublic Hey there… This post is 398 days old. It was written on 25.03.2013. Please make sure to be careful with the information provided and check a more recent source on this topic. While it is possible to consume nearly all means of content on your smartphone or tablet it seems like the dream of a paperless office comes true for a lot of web developers. But digital natives are not the only ones who are on the web. Disclaimer: This article was first published in the German Screen Guide Magazine #15 (September to December 2012, pages 77 to 79). The basics of a print style sheet should already be well known by most web developers. a separate file included in the HTML that carries all CSS for print media <link rel="stylesheet" media="print" href="css/print.css">a special media query which targets print mode and is integrated into your regular stylesheet @media print { … } Remove Clutter In general focusing on the main content of a web page is very important when it comes to print style sheets. Thanks

How to Use SVG Image Sprites Despite being scalable, saving bandwidth and an obvious candidate for Responsive Web Design, Scalable Vector Graphics (SVGs) are relatively rare on the web. The reasons? SVGs don’t work in older versions of Internet Explorer — support is only available in IE9+the technology has been around since 1999 — it seems old and unexcitingthere are fewer vector design toolsthey’re XML-based which sounds scary to many. Let’s show some love for SVGs! Bitmap Image Sprites Image sprites have been a good-practice technique for many years. This example contains eight 24×24 icons in a single 192×24 file. If we require the right-most printer icon, we can use CSS to show the correct image by positioning the background: SVG Image Sprites Is it possible to place multiple SVG images in one file? We’ll create a very simple SVG with three individual icons — a green circle, red square and blue triangle: Each is stacked on top of the other in a separate g layer which has a class of “sprite” and a unique ID.

Yesod, AngularJS and Fay It's been a while since I discussed Yesod's approach to client-side programming. I haven't been quiet due to a lack of interest. On the contrary, I've been playing around with a lot of different approaches, and discussing things with a number of people as well. Additionally, there have been some very exciting changes in the Haskell Javascript space. Back when we discussed this in April, I demonstrated a combinator-based approach for generating Javascript from our Haskell code in a type-safe manner. So the big question is: what do we want from a client-side solution? A better language than Javascript. AngularJS We can solve all four of these issues with a two-pronged approach. You can see my sample code on Github. cmdGetPeople <- addCommand $ \() -> do people' <- getYesod >>= liftIO . readIORef . ipeople return $ map (\(pid, Person name _) -> PersonSummary pid name) $ Map.toList people' Each command takes a single JSON value as input, and returns a single JSON value as output. Fay Commands

The Battle of Modern Javascript Frameworks: Conclusion – Which One to Choose | SoftFinity - On one hand, each javascript framework has its unique advantages and it is reasonable to say that each one has its place in web development. On the other hand, these frameworks have a similar goal. They are all excellent frameworks and there will certainly be a place for each one as web apps continue to become more and more sophisticated. Knockout For a small project or improving an existing project knockout is a great choice. For larger projects knockouts view model could start to get a bit complicated because computed data is not separated nicely from persistable data, and increasing numbers event handlers may become hard to keep track of. Backbone If you are an experienced javascript programmer looking for a mature, proven framework that provides MVC architecture to your code while maintaining as much low-level control as possible and offering easy REST api data access plus routing, backbone would be a good choice. Angular Ember Link to Part V: Ember.js

Advanced cross-browser flexbox By Chris Mills Introduction The CSS Flexible box module level 3 — or Flexbox for short — brings with it a lot of power and some very exciting possibilities for web development, allowing us to put together complex site layouts easily and rapidly, and dispensing with some of the illogical hacks and kludges that we've traditionally used. I dealt with the basics of Flexbox in my article Flexbox: fast track to layout nirvana? In this article I will go a bit further, looking at a more advanced example, and using Modernizr to serve different styles to browsers with differing levels of flexbox support, providing the best level of cross browser support currently available. Introducing the example The example I have built for this article looks like Figure 1: Figure 1: An image of the final layout example This has multiple levels of flexboxes contained within it. The overall layout The basic layout of the site is like this: The <section> is set to display as a flexible box like so: Child flexboxes

Building nested recursive directives in Angular - Sebastian's Blog I learnt a new trick over the weekend using Angular, how to build a recursive tree of objects using directives. In this post I want to share how to do it. Let’s say that you have some data that looks like this, it can be as deep as you want: And using this data you want to build a tree, e.g Europe Italy Rome Milan Spain South America Brasil Peru So to build something like this you will need some kind of recursive code to loop over all the elements and their children. Let’s start with the html: First we have a controller ‘IndexCtrl’ which looks like this: Here we have $scope.locations pointing to the array of locations we want to render in our tree. Then we need a directive for rendering a collection, the html for the collection looks like this: This directive takes a collection parameter which are the locations we want to render. Our directive definition looks like this: Notice the following code in the template: The directive for member looks like this: That is it, here is the complete example.

TodoMVC The Battle of Modern Javascript Frameworks: Part V – Ember.js | SoftFinity - Ember as it is described by its creators is ambitious and opinionated. The goal of developing ember is simple; create a web framework that will enable web apps to rival native apps. To accomplish this, ember offers an end to end solution with all the features you need to create a single page web app functioning in unison. Ember also seeks to abstract as much as possible from the programmer in order to take care of all the small decisions that programmers would otherwise have to make. Features -Sophisticated handlebars templates -Views that respond to events -Routing for representing the state of the model and view in your application and enabling deep linking to return to a particular state -Models that are persistable with a REST api -Controllers which produce computed properties from the model and pass it to a view -API for performing operations on Enumerable objects Strength of the Project and Community Ember’s development is lead by Yehuda Katz and Tom Dale. Ease of Learning Pros Cons