Mojito « Master's Castle

Tag Archives: Mojito

TodoMVC using Mojito, Part 2: Common affinity controller

Posted on April 7, 2013 by m10v

In Part 1, we got our basic application ready with the following setup:

Application and Routing Configuration
TodoMVC defined assets
Initial UI – HTML markup and CSS stylesheet

In Part 2, we explore configuring all of the CRUD actions and update all associated artifacts – model, controller and binder. Specifically, we explore the following actions – one at a time:

Action – List all TODOs
Action – Add a TODO
Action – Edit a TODO
Action – Mark one or all complete
Action – Delete a TODO

Step 1: Action – List all TODOs

The first thing that we build up is retrieving all TODO items and showing them up. If there are no items in the list, then, as per the specs, the #main element must be hidden.

Let us start with updating the model followed by the controller and binder in that order.

TodoMVC using Mojito, Part 1: Common affinity controller

Posted on April 5, 2013 by m10v

No Comments

This is first post in the series that describes building a simple Todo application using Mojito. The constraint that we have in our first implementation is that the controller will have common affinity.

As a prerequisite to understanding the implementation, I would assume that you are well versed with JavaScript and are hands on with Mojito. If not, it may be worthwhile to explore my initial posts on getting started with Mojito.

The complete code generated can be structured in the following steps:

Initial code generation using Mojito CLI tools
Application and routes configuration
Initial UI – View and CSS
Model
Controller
Binder
Action – List all TODOs
Action – Add a TODO
Action – Edit a TODO
Action – Mark one or all complete
Action – Delete a TODO

Todo MVC using Mojito

Posted on April 3, 2013 by m10v

No Comments

TodoMVC is an awesome project by Addy Osmani and Sindre Sorhus. In their own words:

Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing their JavaScript web apps.

Backbone, Ember, AngularJS, Spine… the list of new and stable solutions continues to grow, but just how do you decide on which to use in a sea of so many options?

To help solve this problem, we created TodoMVC – a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.

The website now boasts of implementations using over three dozen frameworks. And I decided to pitch in using Mojito by Yahoo!

Mojito Hello World now live on Nodester

Posted on June 9, 2012 by m10v

No Comments

My earlier “Hello World” case studies are now live at http://m10v-helloworldapp.nodester.com/

References:

btw, in case you are wondering how I got the Mojit up and running using “node server.js” than the regular “mojito start“, read my last post at http://www.m10v.com/2012/06/yahoo-mojito-on-standard-node-servercloud/

And here goes what it looks like:

Yahoo! Mojito on standard Node Server/Cloud

Posted on June 8, 2012 by m10v

No Comments

Getting started with Yahoo! Mojito is pretty straightforward. The only catch is, you must issue a mojito start command.

The problem that we get into is that most of the public Node.js clouds have no idea about this new command. All they know to do is node server.js

Recently I tried my hands with Nodester (www.nodester.com). Standard mojito code failed since server.js only instantiated an HTTP server but did not listen.

With inputs from Terry on making the server listen, I was able to run Mojito application on Nodester.

The original discussion between Terry and myself is at http://groups.google.com/group/nodester/browse_thread/thread/e35c7eb3b122ff01

The running application is provisioned at http://gvtestapp.nodester.com/@HelloMojit/index

UPDATE: The application is now available at http://gvtestapp.nodester.com/

Yahoo! Mojito: Part 2 – Enhanced Hello World!

Posted on May 28, 2012 by m10v

No Comments

Yahoo! Mojito:: Part 2 - Enhanced Hello World:: Results after Submit

This is Part 2 of the “Hello World” article. In this followup article, we enhance our code to:

Render a form on the landing page which asks user to enter his/her name
Process the data on the submitted form
Say “Hello {user}” rather than “Hello World”

What we will learn through all this is:

One of the various possible options to accept data to the server
Process incoming data
Apply business logic and create the data to be rendered

Let’s get started with customizing the view to create a form…

Pages: 1 2

Yahoo! Mojito: Part 1 – Hello World!

Posted on May 27, 2012 by m10v

No Comments

Yahoo! Mojito:: Part 1 - Hello World:: Artifacts

Yahoo! Mojito is, now, watched officially by 1027 developers (as of writing this article) on Github (see https://github.com/yahoo/mojito/watchers) and is actively contributed by developers across the board (see https://github.com/yahoo/mojito/network). And I’m pretty sure, there will be several others who would have downloaded, installed and tried.

Before getting into this detailed Hell World tutorial, I assume that you’ve already installed Yahoo! Mojito using the instructions given at https://github.com/yahoo/mojito README. I preferred an npm-install to ensure that I get a stable version.

Defining the “Hello World” application:

The first step will be to create an application with defaults, no customization, and get it running.
Next, we’ll make the application run at port 80 and ensure that the content is available at “/” rather than a strange but intuitive default path.
Subsequently, we’ll change the default contents to reflect “Hello World” in the message
And finally, we’ll make the application interactive by creating a simple form that will accept user’s name and say hello to him/her rather than to the whole world 😉

And here’s some vocabulary before we deep dive:

Yahoo! Mojito: MVC framework for JavaScript based application.
Mojito Application: An application based on Mojito framework.
Mojit: A mojito widget – with its own model, view, controller and binder.

We call this application – “HelloWorldApp” and the mojit as “HelloMojit“.

Pages: 1 2 3

Yahoo! Mojito – Web Developers’ Dream

Posted on May 11, 2012 by m10v

No Comments

I’ve started to love HasGeek forum more than others… and there are reasons, mainly the audience and quality – of speakers, planning and execution. I was happily surprised to note that the guys used NFC cards, most probably during breaks. Probably because I had to leave after my session in the morning.

My session at MetaRefresh 2012 was on Yahoo! Mojito, which was recently open sourced at Github.

Below are the slides from the presentation…

Yahoo! Mojito

View more presentations from Gaurav Vaish

Yahoo! Mojito – The Ultimate MVC Framework for Web Apps

Posted on April 9, 2012 by m10v

No Comments

Probably. Well, I feel it at least as of date.

More often than not, the web application developers end up in doing the following:

Create a server side logic of the application with all code in PHP, Java, Python, Ruby, C# and what not languages

Choose amazing server side frameworks like CodeIgniter, Struts / JSF, Django, RoR, ASP.Net MVC and what not amazing (MVC or otherwise) frameworks

Create a client side view of the application using HTML / JavaScript / CSS for web, Java for Android, Objective C for iOS etc

Create a middleware for client-server transaction, typically using JSON / XML as content format and serializers and deserializers on either sides in corresponding language (server / client sides)

The issues that typically arise are:

Ensure that the server and client sides of the middleware are always in sync in terms of their contracts

Ensure that the end-points are correctly defined and both the sides are kept in sync

Ensure that the end-points are correctly registered in web.xml, web.config, routes.rb, appropriate Python / PHP files etc

Ensure that if multiple requests are fired to the server to retrieve data, you manage the responses appropriately (this is relatively easier because of jQuery / YUI structures)

I am pretty confident, there are a lot more problems pertaining to client <=> server interaction and state maintenance but these are some of the important ones. I’d love to hear about more crucial issues…

Wouldn’t it be great if it would be possible to answer "YES" for the following…

Can I just do a MyModel.getData(myCallbackFunction) and don’t worry if the piece of code is called on the server or the client?

Can I just call a business operation doWork and don’t worry if it needs data which may have to be retrieved from the server or the client?

Can I just call an operation doWork and don’t worry if it actually gets called on the client or the server?

Well, that’s where – and for lot more reasons – Yahoo! Mojito framework comes into picture.

It seems I just can’t wait to write about it… one piece at a time. btw, my enhancements to Mojito are available at Github at https://github.com/gvaish/mojito

M	T	W	T	F	S	S
« Apr
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30