I am quite a novice when it comes to web application development. The projects that I have done thus far have purely been Client Side and Jquery powered.
Recently I made a discovery that Javascript has an MVC framework (http://backbonejs.org/)
This really excites me as about 90% of my experience to date has been with Javascript, so the possibility of using an MVC framework within a familiar coding language is actually quite awesome.
After some more reading and probing I discovered a local storage adapter for backbone:
http://documentcloud.github.com/backbone/docs/backbone-localstorage.html
Basically if I have understood this correctly - it will store and retrieve data in cookies
So the above framework (backbone) and addin (local storage) will allow web applications to operate in a "server-less" environment.
Before I get crucified by any techies - I do understand that this is a very generous, generic and simplified statement - but I am just trying to find out a few things at this point:
Is my understanding of the framework correct?
Has anyone had any development experience with the above?
Where can I get novice level tutorials on developing MVC Web applications that use Backbone.js
Looking forward to the discussion and your answers
Is my understanding of the framework correct?
First off there are several "mvc" like frameworks for Javascript besides for Backbone.js (assuming you consider backbone.js an mvc framework, take at look at this SO question as well as the official documentation) for example Ember.js, Knockout.js, JavascriptMVC. That said local Storage is a feature of HTML5 and isn't specific to backbone.js (so the browser would need to support it, here's a SO question with some more info on localStorage), what the backbone.js localStorage adapter does is saves the backbone.js data to localStorage instead of the server.
Has anyone had any development experience with the above?
Yes (you can take a look at the questions tagged with backbone.js here on SO for starters...).
Where can I get novice level tutorials on developing MVC Web
applications that use Backbone.js
Have a look at this site for some backbone.js tutorials.
Related
I'm about to embark on a large project based around mobile web apps. I am going to create a mobile web app that will have multiple screens, a search system and a few other features.
I need to establish a primary framework for this application. It seems I have two options; multiple separate HTML pages, or alternatively, use AJAX to download the contents and move divs in and out of the viewport.
I don't have to worry about SEO. I'm primarily looking for good performance. I understand Stack Overflow is a site about questions and answers and this does somewhat involve opinion, but I feel that based on my criteria there should be a solid answer to this question.
I'd highly appreciate it if somebody could share what they think the best option would be for me on this project.
What I believe you're referring to by using AJAX to download the contents is commonly known as a single-page web app. These generally involve rendering data using templates on the client side and sending and receiving the data via AJAX.
For these, there are plenty of excellent JavaScript framework options, including:
Backbone.js
Knockout.js
Angular.js
Ember.js
Of these, Knockout is probably the easiest to learn (seriously, the tutorial is brilliant), but the lack of routing lets it down somewhat. I tend to use Backbone for this type of thing myself, although if I were starting over I would probably go for Angular as it's made by Google and seems to have more momentum. But try a few tutorials and see which one works best for you!
All of these offer a lot of very handy functionality for your use case, as they enable you to load data via AJAX and render it on the client side quite easily. There is a learning curve for all of them, but they result in a much more maintainable and testable client-side application. Believe me, I have tried to build such an application with just jQuery, and I would recommend you avoid it as it gets very painful, very quickly!
Your mileage may vary, but by and large a single-page web app like this should perform better than a more traditional web page because once the application has loaded, all the communication with the server is just sending and receiving JSON. It will also likely be simpler as you can use a lightweight REST framework like Slim, Sinatra, Express or Flask on the server side, and just serve up the static content on the home page, then do everything else via AJAX.
This question already has answers here:
Is there a JavaScript MVC (micro-)framework? [closed]
(30 answers)
Closed 10 years ago.
I'd like to build an app in JavaScript that follows the MVC pattern using a framework that is packed with features like Ruby on Rails. I know Rails fairly well and having a "JavaScript port" of it would be nice. (When I say "JavaScript Port" I don't mean literally, just something similar.) I want to use JavaScript both on the client side and server side. I'm sure that unlike Rails, the client-side will be much heavier and that's fine. I imagine the server-side of it would run on Node but I'm open to other ideas.
My question is basically, what's the closest JavaScript framework to Ruby on Rails? If there is not one solution, what combination?
In 2012 was Railway Node.JS MVC framework based on ExpressJS, fully ExpressJS-compatible. It allowed you to build web applications in a similar manner as in Ruby On Rails.
In nowadays there is good frameworks like CompoundJS and Sails.JS
Server Side (for Node):
Geddy is very "railsy" http://geddyjs.org/
Client side:
Ember.js: http://emberjs.com/. There is also Rails integration gem. Yehuda Katz and Tom Dale are the main developers, you can know them from Ruby world :)
I would check out Meteor.js. It's JS on client and server side (using Node.js) and rather than an MVC framework, it binds your models to your views using web sockets so that changes to the server get pushed down to the client and the page is updated instantaneously.
Because it uses the reactive model rather than MVC, it's not quite like RoR, but the frameworks do have productivity and developer friendliness in common. Meteor uses smart packages (like RubyGems) that can seamlessly add functionality to your app, you can get something working very quickly, and you can deploy in the snap of a finger if you choose to put it up on meteor.com (and deploying to your own server is not much different than deploying any other app).
in the client side in the last few months I used Joosy - http://joosy.ws
It is super easy to integrate in rails (it is designed for RoR, and you can still continue using RoR as a backend).
from their website:
..is a javascript framework. Being a harmonious extensions to Rails it introduces everything you like about this framework right to your browser. Ready conventions set, extensive CoffeeScript, HAML support, Helpers, seamless backend integration, automatic code generation and more..
There is also an interesting comparison with BackboneJs and EmberJs here: http://guides.joosy.ws/guides/basics/joosy-vs-x.html
You can look at Backbone. This is developped by ROR developers I believe, it's not a MVC but an MV.
http://backbonejs.org
I haven't used Tower.js but it advertises itself as something similar to what you are looking for:
Built on top of Node's Connect and Express, modeled after Ruby on
Rails. Built for the client and server from the ground up.
http://towerjs.org/
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
This has probably been asked in the past, but I can't quite figure out what to Google to get the answer.
I am writing a web application where the entire backend is already available as an API. I am wondering what javascript frameworks would be good for writing the frontend. What javascript frameworks would work well for the frontend development?
I don't need the entire stack like Meteor and Node.js offer, I simply need some logic controllers and views. Is Node.js good for this? Do other frameworks exist? I will likely have business logic on the frontend so having a framework that is good for this would be nice.
20 JavaScript Frameworks Worth Checking Out
Sproutcore
Sproutcore powers a lot of high profile apps including MobileMe amongst others. Sproutcore has a steeper learning curve compared to the other options but makes up for it with developer productivity once he/she has learned the ropes. This framework boasts a UI framework, the market standard MVC architecture and well written documentation.
Related links:
Using SproutCore 2.0 with jQuery UI
Build a Micro-Blog with SproutCore
When To Use SproutCore, and When Not To
Cappuccino
Cappuccino was created by the 280North team, now owned by Motorola. This framework gained significant coverage with the release of the 280Slides — built completely with Cappuccino.
This framework varies dramatically from the others in that a developers doesn’t need to understand or work with any of the front end trifecta — HTML, CSS or the DOM. All you need to master is the framework!
JavaScriptMVC
Built on jQuery, JavaScriptMVC is a veteran in the front end frameworks battlefield, dating back to 2008. Featuring a familiar, and obvious, MVC architecture, this framework is quite full featured with support for code generators, testing and dependency management.
Asana Luna
Luna is one of those hush-hush private frameworks that people have been talking about. And for good reason, I must admit.
The framework features a lot of niceties including an evolved MVC architecture, pubsub, caching, routing and authentication.
Backbone.js
Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.
qooxdoo
qooxdoo is a universal JavaScript framework that enables you to create applications for a wide range of platforms. With its object-oriented programming model you build rich, interactive applications (RIAs), native-like apps for mobile devices, light-weight traditional web applications or even applications to run outside the browser.
Spine
Spine is a lightweight framework for building JavaScript web applications. Spine gives you a MVC structure and then gets out of your way, allowing you to concentrate on the fun stuff, building awesome web applications.
ActiveJS
ActiveJS is a JavaScript application framework that provides local and REST based data modeling and pure DOM view construction with back button and history support along with framework agnosticm and lack of external dependencies.
Eyeballs
eyeballs.js is a slim javascript library designed to sit on top of a javascript framework, such as jQuery or Prototype. eyeballs.js can sit on top of an already implemented web app with a well thought out object model. It can also be used to build standalone javascript apps, backed by HTML5 local storage or something like CouchDB.
Sammy
Sammy.js is a tiny JavaScript framework developed to ease the pain and provide a basic structure for developing JavaScript applications. Sammy tries to achieve this by providing a small ‘core’ framework and an ever-growing list of plugins for specific functionality.
Choco
Choco brings the MVC to the client side! A Choco app consists of only one HTML page, all the interactions are managed by Javascript. Your UI only uses HTML and CSS!
Agility
Agility.js is an MVC library for Javascript that lets you write maintainable and reusable browser code without the verbose or infrastructural overhead found in other MVC libraries. The goal is to enable developers to write web apps at least as quickly as with jQuery, while simplifying long-term maintainability through MVC objects.
Angular
Angular supports the entire development process, provides structure for your web apps, and works with the best JS libraries. With angular, the view and data model are always in sync — there is no need for manual DOM manipulation. Angular is small, weighing in at 60kb, is compatible with all modern browsers and works great with jQuery.
ExtJS
Ext JS 4 brings a whole new way to build client applications, by introducing the popular model-view-controller pattern to Ext JS. By allowing the separation of data management, logic and interface elements, Ext JS 4 makes it easier for even large development teams to work independently without worrying about stepping on each other’s toes. Ext JS 4 ships with a helpful MVC guide to get started.
Knockout
Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably.
Jamal
Jamal is a set of conventions and small javascript libraries to archieve a complete separation of html, css and javascript in your web application. Jamal is built on jQuery and inspired by MVC frameworks like Ruby on Rails, CakePHP and its derivatives.
PureMVC
PureMVC is a lightweight framework for creating applications based upon the classic Model, View and Controller concept. Based upon proven design patterns, this free, open source framework which was originally implemented in the ActionScript 3 language for use with Adobe Flex, Flash and AIR, is now being ported to all major development platforms.
TrimJunction
The open source Junction framework is a conventions-over-configuration, synchronizing web MVC framework for JavaScript. TrimPath Junction is a clone or port of the terrific Ruby on Rails web MVC framework into JavaScript.
CorMVC
CorMVC is a jQuery-powered Model-View-Controller (MVC) framework that can aide in the development of single-page, web-based applications. CorMVC stands for client-only-required model-view-controller and is designed to be lowest possible entry point to learning about single-page application architecture.
batman
batman.js is a full-stack microframework extracted from real use and designed to maximize developer and designer happiness. It favors convention over configuration, template-less views, and high performance by simply not doing very much. It all adds up to blazingly fast web apps with a great development process; it’s batman.js.
Source: http://net.tutsplus.com/articles/web-roundups/20-javascript-frameworks-worth-checking-out/
I'm preparing to implement a Backbone.js UI (client-side MVC) within ASP.Net MVC 3+ web application (server-side MVC).
I've read plenty of Backbone tutorials, but none that illustrate how the technology may or may not be useful in an ASP.Net MVC scenario.
What strategy should I follow when combining these two pieces?
To be fair, Backbone.js (client application) and MVC (server application) should have nothing in common. The only thing Backbone.js requires is a Restful Api. So what I would do is take a look at MVC 4's Web Api (Example). There are quite a few tutorials on the subject, but the one I listed gives quite a good overview.
Once you understand how to implement a Restful API, look at any tutorial on backbone.js that integrates with a server application. Just substitute your api with the tutorial's api and you should be in business. Read this book, it is priceless and contains brilliant examples on how to implement a backbone.js application locally and with a server.
On a side note, MVC 4's Web API integrates perfectly with backbone. Have a look at a plugin developed by Addy Osmani, Backbone.Paginator. It helps make filtering, pagination, skip, sort etc extremely easy with MVC 4's Web API and odata filters.
After learning Backbone.js and using it on a few projects, I've found that most of my time is spent figuring out how to use it, and not what my backend is doing. In terms of ASPMVC, you setup a few controller actions that return JSON.
Rob Connery uses Backbone.js with MVC3 in his series Real-World ASP.NET MVC3 on Tekpub.
Episode 6 - BackboneJS - is spent entirely introducing you to backbone and ASPMVC3 integration. Unfortunately, you must purchase the entire series for $32 and it helps to watch the whole thing to get a sense for whats being built. Further, I don't agree with the way he approaches everything in the videos but his use and description of Backbone.js is very helpful if you are new.
DocumentCloud (the project from which Backbone.js emerged) maintains a page entitled Tutorials, blog posts and example sites. They don't always list the backends used so you may have to browse all the links to see if you find anything.
This is quick little tutorial from real-world experience, basically wiring a backbone application to some ASPMVC endpoints.
Finally, here is a recent post on Microsoft's own ASP.NET Weblogs called "Integrating Backbone.js with ASP.NET Web API".
I am seeing more and more applications that seem as though they are entirely written in JavaScript see (https://chrome.google.com/webstore/) for an example and view the source. As you will see there is no source code except a call to a series of JS files. The app works as though it's still a website though and seems to use the HTML5 history API to alter the address on the fly.
Anyone know much about this sort of technology/design patterns, know some good starting points or examples of their own? I have seen things like Sproutcore and Cappuccino but they seem very different to the way in which the Chrome web store has been built.
I'm looking to use it with frameworks like ASP.NET MVC 3 and CakePHP.
Alot of Googles projects are developed with Google Web Toolkit. It's a framework for building Javascript apps in Java.
http://code.google.com/webtoolkit/