I'm having difficulty grasping how to structure/architect a canvas application using an MVC like approach in Javascript. UI will be fairly fluid and animated, the games fairly simplistic but with heavy emphasis on tweening and animation. I get how MVC works in principle but not in practice. I've googled the buggery out of this, read an awful lot, and am now as confused as I was when I started.
Some details about the application area:
multi screen game framework - multiple games will sit within this framework
common UI "screens" include: settings, info, choose difficulty, main menu etc.
multiple input methods
common UI elements such as top menu bar on some screens
possibility of using different rendering methods (canvas/DOM/webGL)
At the moment I have an AppModel, AppController and AppView. From here I was planning to add each of the "screens" and attach it to the AppView. But what about things like the top menu bar, should they be another MVC triad? Where and how would I attach it without tightly coupling components?
Is it an accepted practice to have one MVC triad within another? i.e. can I add each "screen" to the AppView? Is "triad" even an accepted MVC term?!
My mind is melting under the options... I feel like I'm missing something fundamental here. I've got a solution already up and running without using an MVC approach, but have ended up with tightly coupled soup - logic and views and currently combined. The idea was to open it up and allow easier change of views (for e.g. swapping out a canvas view with a DOM based view).
Current libraries used: require.js, createJS, underscore, GSAP, hand rolled MVC implementation
Any pointers, examples etc., particularly with regards to the actual design of the thing and splitting the "screens" into proper M, V or C would be appreciated.
edit: ...or a more appropriate method other than MVC
Related
Im using Bootstrap and AngularJS with .Net Web API for my backend services. Im still a bit new to AngularJS. When considering the different sections of the layout, my app directive is currently at the container level named "Bottom". However, my individual views will be in the area named "main-content" (these are div boundaries).
The layout also contains an area named "sidebar" which will only be used on one page, the rest of my pages will expand "content-wrapper" from 10 to the full 12 column width of the page.
So Im trying to decide on how to use either use one layout (in terms of our MVC _layout.cshtml typically used for the template) for both types of pages, or use two separate layouts. The latter seems "cleaner", since trying to use a single layout for all scenarios seems more trouble. I think Ive used separate master pages with ASP.Net web forms in the past in these cases. Same idea here? I think this would make things cleaner also with regards to setting up the AngularJS code, as I can separate the two page types with different modules with their own controllers. Does this seem like a good approach, considering not just the mvc layout, but any impact on Angular/Javascript code?
TL;DR: Use one layout CSHTML page.
It's hard to give a confident recommendation without having a deeper knowledge of your application. Ultimately, it's your decision to make based on the information you have.
That being said, if indeed that sidebar is only used on one page, it should be considered part of that page. With that in mind, Container in the image you attached would serve as the host element for the router's view directive and the page with the sidebar will have that sidebar in its template.
If, however, the sidebar may appear on other pages in the future, I would simply hide it based on the current page with the view directive on the content-wrapper in your example. I have a similar situation in an app I'm working in which the sidebar behaves as a sort of internal navigation. If the current page does not have any sensible links to put in that sidebar, we hide it. Something like that may work for you in this case.
In either case, I would recommend against using multiple CSHTML layout pages because of the potential strangeness in the user's experience with some pages using a nice, AJAX-driven navigation and others using an old-school, "white-flash" kind of navigation.
Take a look at ui-router, which is an alternative to the default routing that Angular comes with. It allows you to have multiple views, the content of which can change based on the route. If you are used to using a templating system to layout applications pages and your pages have a generalized sort of layout (ie all pages have a top nav, a main body, and a footer, or something similar) then ui-router goes a long way towards making this much easier in Angular.
I'm switching from using JQM and Phonegap to using Topcaot and a few smaller libraries to take care of transitions and such. One thing I haven't found a micro-library for is the navigation.
While many site I've seen say to create the UI and content dynamically through javascript, it does seem like a daunting task do to the amount of pages I would need to create. Similar to JQM, I want to be able to separate my different pages as different html files that ajax load them into the DOM, but in an optimized way that is fast and doesn't cary the weight of JQM.
TO anyones knowledge does such a library exist or would this be a library I would have to write? It doesn't seem like it would be an overly complicated task, especially if I would use jquery. Any ideas of help is appreciated.
try angularjs. Here there's an example with topcoat: http://coenraets.org/blog/2013/11/sample-mobile-application-with-angularjs/
Angularjs is very different from JQM but you should give it a try.
Otherwise, if you don't like angularjs you can find a more traditional approach at this page: http://coenraets.org/blog/2013/03/hardware-accelerated-page-transitions-for-mobile-web-apps-phonegap-apps/
Hope this helps
Here you are - new plugin based on coenraets css transitional solution: https://github.com/linslin/pagingSlider
Features:
Paging with pagingSlider
default pageSlider actions
Pagebrowser
Totaly plugable like pageSlider
if you want, pagemenu to switch directly to a page
touch events
Consider looking at Topcoat Touch (Github Project), it is basically a micro library for transitions and events (5k minified and gzipped) -- full disclosure, I am the author of Topcoat Touch.
It is a very simple framework that uses Topcoat to create the UI, inspired by jQT and to a lesser extent jQuery Mobile. It can be either a single html document with multiple pages contained within the same document, or using a collection of controllers and templates. It uses a collection of optional libraries to provide most of the functionality for a mobile framework and has a generator for Yeoman to get the scaffolding up quickly.
I haven't used it, but Kendo UI Mobile is similar to JQM and may fit your needs: http://www.kendoui.com/mobile.aspx
USECASE: I am starting with a project which involves a lot of client side scripting. It is similar to a mini CMS where user can drag and drop html components. Somewhat similar to this. Now I am in a situation where I have to choose a MVC framework for defining the components that the user will be working on. (performing operations like drag, resize, delete etc).
Now the problem I am facing is,in choosing a framework which would be easy to learn and implement. I have the basic knowledge of Javascript and jQuery and have been using it for some time,but no experience with MVC.
My research from past 2 days says backbone.js is good to start,but I would like comments/suggestions over the flexibility it gives on handling html components and DOM elements. How can I store the initial content of the HTML components? (Outer boxes and structure).
Also, how can I handle multiple components of same type? Generating Id's dynamically is an option, but it becomes difficult to manage multiple elements with dynamic ids. Is there any other way they can be handled?
Which framework would it be easy to handle events on these components?
i use backbone for a web app which involves dragging and dropping, and i use jquery ui to implement the drag and drop features. They integrate pretty well imo, when you want to implement a droppable backbone view, for example
render: function(){
var $el = this.$el,
over = false,
origWidth;
if (!this.$el.is('.ui-sortable'))
this.$el.sortable({
revert: false,
axis: 'y',
placeholder: 'placeholder',
items: '.load-order',
containment: this.el,
receive: this.onOrderDrop,
over: this.onOrderOver
out: function(e, ui){
// Resize back to original width
if (over && ui.helper)
ui.helper.stop().animate({width: origWidth}, 'fast');
over = false;
}
update:
with backbone views, you have a skeleton html structure which is then incremented with backbone views.
Each view has a template which is rendered with model data
you can read more about it at Backbone Essentials
also i made a small todolist to demonstrate draggable event with backbone
http://www.github.com/joaoxsouls/todolist
Why do you want to use BackboneJS?
If its not a necessity, and you simply want a drag drop interface, you might want to look at this: http://omshankar.kodingen.com/engine-1.73/
The JavaScript has been minimised only to make it single line. Functions and variables are all intact, which in Chrome can be seen by clicking on {} in Sources
If its an extreme necessity, you can definitely have drag drop in backbone. Only thing is that you might have to initialize a drag drop again in the item's render function, every time its called.
Regarding having an HTML structure, outer box and components, make your HTML the way you want. It can be done. A sample Backbone application: http://omshankar.kodingen.com/exp/backbone-html5-dd/
It also has a drag-drop, but that's dragging image files from your OS into browser, not of your relevance
If you want to store HTML, you can do via local storage, or have that simply in your HTML file. Apply/Make Backbone view only to those parts that are dynamic
I suggest Angular JS? It has great binding and directive features.
AngularJS is great, especially if you couple it with something like ConversationJS:
https://github.com/rhyneandrew/Conversation.JS
I'm not a big fan of how "spaghetti" angular feels, and Conversation allows you to decouple quite a bit of it without changing the way it works. It makes the code base quite a bit cleaner.
Basically, I want to combine a HTML5/CSS3 webpage with the Sencha Touch framework (to make use of it's awesome model/store/AJAX functionality).
What would be the best way of doing this? At the moment I'm thinking of creating a top level container in Sencha and plugging the HTML for the page in as a template. However I'm going to need a few DataView objects and I'm not sure how I'd position them in the page unless the whole design was done using Sencha objects.
Well you've got it pretty much figured out already, you just need to get your feet wet now. ST will let you embed any existing HTML or CSS in pretty much any component. That will let you start to leverage ST's non-visual tools like stores and models.
The minute you want to start including other ST visual components though, you can get stuck. ST components are intrinsically tied to it's layout system. That means if you want to drop in lists or other data views, their size, alignment etc is all tied to their parents' layout and other attributes. If they're just dropped in freeform HTML they probably won't look right.
My advice is that you bite the bullet and re-do the whole site in ST. Remember that you can still re-use a lot of your existing HTML fragments within ST panels and containers of your new mobile site. But the important thing is that ST now forms the 'shell' of your mobile site, and that ensures that any ST components you use will be correctly formatted.
Sencha Touch seems like an amazing way to develop mobile apps. I've seen posts by people incorporating Jquery, D3.
At the same time the posts describing customizing controls seems to be fairly narrow.
Adding the picture of a kitten next to the slider and labeling the slider seems kinda tame compared to what ios can do in terms of custom controls, at least in terms of examples available. Most blog posts imply you can extend the control objects in Sencha or the CSS file.
These posts are not quite what I'm looking for - that's my problem. I can't see any examples of anyone changing default controls in Sencha touch, but they make it sound as if it might be possible to do anything.
This is my question:
Is Sencha Touch able to build an iOS or Android App incorporating any javascript library or HTML5? Are there any limitations here?
To give an example I trying to implement a custom slider, where a touch along a continuous line or a circle like this color selector will enter new values. Further if you incorporate a library like protovis or D3 (or Raphael charts) can Sencha display anything the graph canvas element will otherwise display? Will it take touch input and interact with the graph libraries the way that the HTML5 graph does?
The post you mentioned is not about customizing controls, it's about displaying a list from bound store, instead of of using just Ext.XTemplate (the system with Ext.view.View) to generate HTML, it uses ComponentView to generate Ext.Components instead.
It's hard to tell what you're asking, what in particular are you trying to do?
To address some of the questions you added:
Charts in Sencha are implemented using Raphael, which uses SVG, therefore all the elements in the chart can be interacted with using HTML events.
Everything that Sencha generates is valid HTML, you can listen to HTML events, but components usually abstract the lower level events into something that is easier to consume, (for example a data view abstracts the click so that it passes the record being clicked along with the event).
Therefore, the answer to the question is, YES, Sencha can co-exist with regular HTML. If you want the full benefit of the framework, you should always create an Ext.Component so that your components can be easily used within the framework's layout containers.
It's very easy to misuse Ext when trying to write regular HTML and still place that within the layout rendering pipeline. Ext.Component has a built in way of creating HTML out of templates, see http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-data and http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-tpl