Mojito #131

Closed
sindresorhus opened this Issue Apr 13, 2012 · 37 comments

Projects

None yet

7 participants

@sindresorhus
Member

Mojito is a sweet (and minty!) MVC application framework built on YUI 3 that enables agile development of Web applications. Mojito allows developers to write client and server components in the same language (JavaScript), using the same framework. Because Mojito applications are written in JavaScript, they can run on the client (in the browser) and on the server (with Node.js). In addition, Mojito has built-in support for internationalization, testing, and building documentation.

Mojito

Looks interesting.

Whoever does this one, make sure to read our contribution guidelines.

@sindresorhus
Member

@jshirley said he may be interested in doing this.

@drewfish
drewfish commented Aug 8, 2012

Hi,

I'm a developer on the Mojito team. I have a question about creating a Mojito TodoMVC. Part of the strength of Mojito is that the same code can run on the client or the server. The App Specification describes a filesystem structure for a purely client-side app. Do you think it would be better to have a just-client-side version of the Mojito TodoMVC app?

(Perhaps the main part of the example would be the just-client-side version, and the client-and-server version could be part of the example code, if someone wanted to download it and start up the server.)

@sindresorhus
Member

No, I think the strength of Mojito should be fully shown. We already have Meteor, which also runs the same code server/client-side. Our file structure recommandation is only meant as aid to those frameworks without opinions on how to structure your app.

@jshirley

Hey @drewfish!

Are you planning on doing this? I've never built a Mojito app, just read the docs and played around some. I am interested in tinkering more, but your resulting product would be superior to mine.

Are you planning on building one? If not, I'll take a swing at it but not sure when (right now my extra-curricular activities are focused on Bootstrap+YUI).

Thanks,
-Jay

@drewfish

I have a desire to attempt this, but I'm really busy too 😞 . I'll see if I can bang out the basics this weekend.

@drewfish

Alas, I wasn't able to work on this much. I did some thinking though. (All of this is just initial ideas -- a different approach might be better.)

  • In Mojito, the developer can structure their app in different ways. So, we should probably give a couple of examples: one where the Todo app is a single mojit, and another where the app is made up of three mojits (header, main, and footer). (The multi-mojit app should still contain a single "Todo" mojit which is a composite containing the three child mojits.)
  • We should make the server-and-client app (or 2 apps, see point above), and use mojito build html5app to create the pure-client app. (If we do make the two apps as described above, we should probably use the simple single-mojit app to build the pure-client app, since the pure-client app is the one most likely viewed by folks visiting the TodoMVC website.)
  • The pure-client app should definitely use localStorage. The server-and-client app could do the same, but also RPC back to the server to save changes there (so that future server-side page loads show the list of todo items). As far as I know, no current Mojito users are doing this kind of thing, but it should be possible without any crazy code paths.
  • To show off one of the strengths of Mojito, we should customize parts of the app based on device (or perhaps something else). Alas, the TodoMVC app UI is pretty simple, so I can't (currently) image how to tweak it for small-screen devices. Perhaps some other tweaks could be done, such as RTL languages or something like that.
@gvaish
gvaish commented Aug 20, 2012

@drewfish I already have the application mostly ready. I should be done by Wed/Thu (India time).
I will push the code at https://github.com/gvaish/todomvc/tree/dev-gvaish.

  • Presently, I am working on the server-client application.
  • You brought in a valid point, about pure-client application. I am thinking of implementing two sub-categories in this: One using YUI, another using jQuery
  • Let me also work on the UI for tablet and mobiles (should be easy to create one - may have to rewrite the CSS using backbone).
@drewfish

@gvaish Mojito runs in the client too, so you should need to do very little differently. See the output of mojito build html5app: it puts Mojito into the pages, and uses it just exactly as it's used for a client-and-server app. That's part of the strength of Mojito: one framework works in either runtime.

@gvaish
gvaish commented Aug 20, 2012

@drewfish I know. However, I was thinking about demonstrating server + client interaction in one (by defining controller actions on server) while doing it purely on client (using client model) in the other.

Let me know if you think otherwise...

@drewfish

I'm confused. Why wouldn't you just use Mojito Binders on the client side?

@gvaish
gvaish commented Aug 21, 2012

@drewfish Binder's will definitely drive the client interaction.

Well, here's a catch:

  • If I put everything in binder, including the data store, it's bad design.
  • If I extract the controller as common (model as common/server), it shows some power of Mojito and, because after initial rendering the controller will be invoked via mojit-proxy, it shows client-only aspects of Mojito.
  • If I extract the controller as server (model as common/server), it shows the real power of Mojito as mojit-proxy will tunnel to the server

And I bet, you'll be full of ideas :)

@gvaish
gvaish commented Aug 22, 2012

Ah... seems like it will be delayed until at least the weekend. I need to be traveling for next couple of days!

@gvaish
gvaish commented Aug 24, 2012

Finally did it.
After thinking over and over and over again, picked up the YUI implementation, had to do simple refactoring and it looks awesome now.

There's one enhancement that I need to do: Had to hardcode the template in todoview and todo-app because otherwise they were parsed in index.mu.html - Don't know how to escape the curly-braces, if possible at all. mu forums didn't help.

@jshirley

Awesome Guarav!

Thank you for your work on this.

@gvaish
gvaish commented Aug 24, 2012

Thanks Jay @jshirley !

I still have one part to do - have a seamless, effortless server-client interaction to be shown. The only catch with that is - it can't be hosted on github :)

@rwaldura

@capecodehq has done work on this as well.

@gvaish
gvaish commented Sep 12, 2012

@rwaldura Started from scratch at https://github.com/gvaish/todomvc-mojito

Will demonstrate couple of interesting scenarios:

  • Mojito framework demonstration: Use Mojito MVC + Binder along with "mojitoProxy.invoke" to demonstrate "easy integration with controller". Will use common affinity for M+C and local storage by M. Can be run from within any browser with any server-side requirement
  • Mojito framework demonstration with server affinity for M+C. Model will use "in-memory" cache. Demonstrates easy migration from pure client side execution (previous app) to server+client execution - requiring no or at best minimal changes (only persistence as a matter of fact)
  • Mojito with YUI MVC Integration: Use Mojito MVC with YUI MVC -- how does that sound!
  • Mojito with jQuery: That's my personal favourite - showing that Mojito is not only about YUI. It's about - anything that you like.

And I'm still keeping in mind inputs by @drewfish

@gvaish
gvaish commented Sep 20, 2012

So... the v1.0 sans test cases is ready at http://todomvc-mojito.nodejitsu.com/

The codebase is at https://github.com/gvaish/todomvc-mojito

A blog post is on the way... :)
A summary:

  1. Uses common affinity for controller and model
  2. Does not demonstrate routing in this application (routes.json only has root entryz)
  3. Uses plain JavaScript for client side MVC. Will integrate with YUI-MVC and jQuery in a later case study (that's one of the parts I love in Mojito)
  4. Uses mojitProxy::invoke to demonstrate the ease with which the binder can invoke controller operations. And that's one of the exotic feature of Mojito.

Comments / critics appreciated...

@sindresorhus
Member

@gvaish Make sure you've read the App spec. I see some stuff missing.

@gvaish
gvaish commented Sep 20, 2012

@sindresorhus I find the following missing:

  1. Folder structure - that's more to do with Mojito structure requirement.
  2. LocalStorage Persistence ID - Persistence uses "todo" where as doc reads "todos-{framework}" / "todos-mojito"
@sindresorhus
Member
  1. Is not problem, it's just guidance.

Some more:

  • Mark all a complete:

The "Mark all as complete" checkbox should also be updated when single todo items are checked/unchecked. Eg. When all the todos are checked it should also get checked.

  • Editing:

Make sure to .trim() the input and then check that it's not empty. If it's empty the todo should instead be destroyed.

  • Footer is not shown.
  • #main should be hidden when no todos:

When there are no todos, #main and #footer should be hidden.

  • Make sure the HTML follows our template. It currently looks like a mess.
@gvaish
gvaish commented Feb 10, 2013

Finally, back in action.

  • All selected updates "Mark all complete" checkbox.
  • If all items are deleted, "Mark all complete" checkbox is unchecked
  • Edit makes use of trim. If value after trim is empty, item is removed
  • If there are no todos, "#main" is hidden
  • There is no "#footer"
  • There is no single HTML, although the final HTML does follow the template provided
    • Templates are divided into
      • index.hb.html - the main/initial HTML loaded,
      • items.hb.html - list of all items, and
      • item.hb.html - single item

Let me know if there's anything else missing and/or update needed for templates.

In action at http://gvaish.github.com/todomvc-mojito/pure/

@passy
Member
passy commented Feb 10, 2013

@gvaish Great to see progress! :) Could you make sure that HTML content in the title is not escaped twice? Try "hello" for example.

@gvaish
gvaish commented Feb 10, 2013

@passy I assume you mean hello with quotes. I got the issue. Let me fix that.

@gvaish
gvaish commented Feb 10, 2013

Ready with controller on the server. https://github.com/gvaish/todomvc-mojito/tree/master/todomvc-mojito-server

Because controller has controller affinity and controller interacts with the model, the model code is also executed on the server.
Mojito magic - renamed the file and ready with this case study.

@gvaish
gvaish commented Feb 10, 2013

@passy Fixed HTML escaping. Noticed #397 talking about the same as well

@addyosmani
Member

Thanks for reviving work on this. You are excellent humans :) can we get this work in as a PR when we feel its ready?

@gvaish
gvaish commented Feb 12, 2013

@addyosmani :-)

The first two parts are ready:

  1. Using only Mojito base framework, everything browser hosted (client-side).
  2. Using only Mojito base framework, controller (and also, store) on the server.

Good to have (will start work on them soon):

  1. Use YUI MVC (App) framework on top of Mojito base framework
  2. Integrate Mojito with jQuery

So, I guess, taking (1) and (2) in mind, I am ready.

The catch is - the final client-side application generated (mojito build html5app) has different folder structure as compared to original code. See, for example, https://github.com/gvaish/todomvc-mojito/tree/master/todomvc-mojito-pure vs https://github.com/gvaish/todomvc-mojito/tree/gh-pages/pure.

So, wondering what's the best structure to create PR - one for master and one for gh-pages?

@sindresorhus
Member

So, wondering what's the best structure to create PR - one for master and one for gh-pages?

We only have gh-pages. But you could have a src and public folder?

@gvaish
gvaish commented Feb 12, 2013

@sindresorhus I assume that all source goes in src and the compiled application (html5app) in public.

If so, I'll create a pull request ASAP.

@gvaish
gvaish commented Feb 12, 2013

But hold on a second... I thought I need to push the code in /labs/architecture-examples@master folder for review and once the review is done, move finally to /architecture-examples@master folder.

This will then move to <folder>@gh-pages.

Am I right in my understanding?

@passy
Member
passy commented Feb 12, 2013

@gvaish master is no longer in use. Think of gh-pages as the new `master. :)

@gvaish
gvaish commented Feb 12, 2013

@passy Ah! Didn't notice that change.

So, should I push in /labs/architecture-examples/mojito/src and /labs/architecture-examples/mojito/public?

@sindresorhus
Member

Sure

@gvaish
gvaish commented Feb 12, 2013

Done! Pull 435 (#435)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment