Jump to content


Photo

Any Simple Mvc Apps Written In Vanilla/plain Javascript?


  • Please log in to reply
3 replies to this topic

#1 8086

8086

    New Member

  • Members
  • Pip
  • 2 posts

Posted 20 February 2014 - 03:42 PM

I am trying to learn to apply MVC to my work in front-end development. The problem is that I have yet to find a good reference implementation of MVC in plain javascript that is not resorting to some third party library like Knockout, Backbone, Angular, etc. Even the vanilla implementation of the TodoMVC app is not MVC!

Therefore I am asking here where people probably know what an MVC app looks like; do any of you know of a small/simple javascript application that actually uses MVC from the bottom up? A minified version won't do BTW. I need to see human readable code :-)

I understand it means a lot of code: the TodoMVC app is more than 900 lines of code and is not even implementing the Observer pattern, but I would really like to have a good, well thought out reference. And it is more for learning than production anyway, so don't try to convince me of just using framework X :)

#2 Beth Robson

Beth Robson

    Veteran Member

  • O'Reilly Employee
  • PipPipPipPipPipPipPipPipPip
  • 376 posts
  • Gender:Female
  • Location:Seattle, WA
  • Interests:I am interested in computer science, the Web, social media and the internet, Mac development, and adult learning.

Posted 04 May 2014 - 05:10 PM

Hi,
We created a small MVC (all client side) JavaScript application for Head First JavaScript Programming (2014), for the Battleship game.

The code is all online, get the link here: http://wickedlysmart.com/hfjs/

Hope that helps!

Elisabeth
Elisabeth Robson
Co-founder, WickedlySmart.com
Author: Head First JavaScript Programming, Head First HTML5 Programming, Head First HTML and CSS, Head First Design Patterns

#3 8086

8086

    New Member

  • Members
  • Pip
  • 2 posts

Posted 05 May 2014 - 01:02 AM

Hi,
We created a small MVC (all client side) JavaScript application for Head First JavaScript Programming (2014), for the Battleship game.

The code is all online, get the link here: http://wickedlysmart.com/hfjs/
Elisabeth


Interesting, but after checking out the code there seems to be a violation of the MVC pattern. The model.fire() method seems misplaced, as it has a dependency on the view! According to Head First Design Patterns the model should be oblivious of the view.

Posted Image
This is from a discussion on Code Review

Edited by 8086, 05 May 2014 - 01:12 AM.


#4 Gerd Wagner

Gerd Wagner

    New Member

  • Members
  • Pip
  • 1 posts

Posted 06 November 2014 - 02:24 PM

I've published the following article on CodeProject: JavaScript Frontend Web App Tutorial Part 1: Building a Minimal App in Seven Steps. It shows how to build a dependency-free JavaScript MVC frontend web application with minimal effort, not using any (third-party) framework or library.

Edited by Gerd Wagner, 06 November 2014 - 02:26 PM.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users