Tag Archives: MVC

TodoMVC using Mojito, Part 2: Common affinity controller

TodoMVC using Mojito - Firebug Console

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:

  1. Action – List all TODOs
  2. Action – Add a TODO
  3. Action – Edit a TODO
  4. Action – Mark one or all complete
  5. 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.

Read more …

Todo MVC using Mojito

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!

Read more …

Yahoo! Mojito: Part 2 – Enhanced Hello World!

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:

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

What we will learn through all this is:

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

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


Read more …

Yahoo! Mojito: Part 1 – Hello World!

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:

  1. The first step will be to create an application with defaults, no customization, and get it running.
  2. 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.
  3. Subsequently, we’ll change the default contents to reflect “Hello World” in the message
  4. 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:

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

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


Read more …

Yahoo! Mojito – The Ultimate MVC Framework for Web Apps

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

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

  1. Create a server side logic of the application with all code in PHP, Java, Python, Ruby, C# and what not languages
  2. Choose amazing server side frameworks like CodeIgniter, Struts / JSF, Django, RoR, ASP.Net MVC and what not amazing (MVC or otherwise) frameworks
  3. Create a client side view of the application using HTML / JavaScript / CSS for web, Java for Android, Objective C for iOS etc
  4. 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:

  1. Ensure that the server and client sides of the middleware are always in sync in terms of their contracts
  2. Ensure that the end-points are correctly defined and both the sides are kept in sync
  3. Ensure that the end-points are correctly registered in web.xml, web.config, routes.rb, appropriate Python / PHP files etc
  4. 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…

  1. 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?
  2. 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?
  3. 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

 

Android MVC – Forward and Backward Navigation

This weekend’s changes to the Android MVC project include the following:

  • Reorganization of the Command classes. AbstractBaseCommand has been created for simple get/set. All methods except “execute” have been implemented. This class now forms the base for IdentityCommand as well as AbstractCommand.
  • Controller now has full support for forward as well as backward navigation.
  • Controller can now record the activity navigation. Uses ActivityStackInfo.
  • Controller now support forward navigation with few more options:
    1. Can optionally mark the command to not be recorded
    2. Can optionally reset the activity stack
  • Controller now has back method for backward navigation.
  • Controller, during forward navigation, manipulates the activity stack appropriately.
    • Missing part is handling failure scenario when receiving a response. When processing the response, if it is in “error” state, IMHO, the response must be handled by the same activity rather than launching a new one.
    • More so, the command must be removed from the top of the stack if there was an error.
  • The support for IMemento, IInitializable has been removed. Not required.
  • The initialize method, henceforth, has been removed from BaseActivity.
  • BaseActivity now has two methods preProcessData and processData called before onBeforeCreate and before onCreateContent respectively.
  • BaseActivity now handles the back button (using the v2.0 function onBackPressed) by calling the back method for navigation.
    • Developers using v1.6 can override the method onKeyPressed and look for the KeyEvent.KEYCODE_BACK and call the method back.

Sample case study (showcase) now comprises of the following:

  • SplashActivity that happens to be the main launcher activity.
  • Erstwhile MainActivity has been renamed to LoginActivity to reflect its purpose.
  • HomeActivitiy continues to be the same.
  • SplashActivity launches LoginActivity using IdentityCommand and sharing some data (using Tag)
  • LoginActivity launches HomeActivity upon successful login (sharing some data using Tag and passing some piece of data to LoginCommand using Data).

The code is, as usual, available on Sourceforge at http://android-mvc.git.sourceforge.net/git/gitweb.cgi?p=android-mvc/android-mvc;a=tree. Additionally, I’ve also pushed the codebase on Github at http://github.com/gvaish/Android-MVC.

Model View Controller (MVC) for Android

Finally, I have been able to find time to push the intial code for “Model View Controller” implementation on Android.

Quite a few people told me that MVC is inbuilt in Android, with the View being represented by the Activity but I failed to visualize or tangelize the Controller. Well, the Model can always be the backend data – the business entities.

The code is hosted on Sourceforge – https://sourceforge.net/projects/android-mvc/

If are you interested in the code, you can get it using Git at git://android-mvc.git.sourceforge.net/gitroot/android-mvc/android-mvc.

Or if you just want to browse the code before downloading it on your machine, you can visit http://android-mvc.git.sourceforge.net/.

The code, by any means, is not yet ready for production use since I know various pitfalls, specially for the scenarios when the “Command” fetches the data from the network or database or from anywhere that takes long time.

In these cases, the best practice would be to hive-off the execution in a separate thread (read: Non-UI Thread). When the response is ready, you would pass it to the main thread (read: UI Thread) using a Handler. This part is implemented in the Controller, however, there can be race conditions in the scenarios where in multiple commands get issued – specially in very interactive application. Well, the bigger question there can always be – should MVC be used in that specific scenario?

Additionally, since, currently, the progress is presented using another Activity, there is an extra house keeping that is being done and I know (by use of this approach in my application), it is bound to fail in near-extreme scenarios.

The fixes are available with me… and I should soon find time to push them. Besides, I also need to a create more powerful case-study! 😀

So… keep watching!

And yes… if you feel that the code has done any good to you, please do spread the word and “Share the Love” :)

Here are initial screenshots of a trivial case-study (scenario) of initial implementation…

[showtime bgcolor=’#fcd77f’ width=’480′ height=’640′]