How do I implement backbone into my hangman javascript game? - backbone.js

I had created a hangman javascript game using html/css and javascript. Now I'm a beginner programmer so my code looks like what they call spaghetti code. Now I'm starting to look into backbone.js because from what I've read it makes code have structure (Please let me know if I misunderstood the purpose of backbone). If you want to see my code it is here https://github.com/bboyjacks/hangman-javascript.git although it is unnecessary since you'll just see messy codes. I want to implement backbone into this game for the purposes of learning backbone by practice. The thing is I'm not sure how to get started.
How would I design my MVC for this game on backbone?
With that I mean. What would go inside my model? What would go inside my controller? and what would be in my views?

Basically, your view should render your game interface from time to time.
The model supposed to be responsible for checking the game state.
For beginner tutorials see (beginner section):
http://backbonetutorials.com/
also, Google can help you a lot:
http://backbone-hangman.heroku.com/

Related

What framework should i chose for make mobile game?

Hi i want to make andriod/ios game. it will be simple RPG base click game like Shakes and fidget. I wonder what app will be best to do it. So farn i know javasript well and java on low level. I find gap mobile could be good, because of my knowlidge of javascript. But unity looks good too, problem is i never done nothing in C# or unity. What is your experience and opinions?.
I know my english is bad, so i apologize for that.
I'm using Unity 2D with C# and it's works really well for me. I suggest you to learn C# if you want to go with Unity(which I think is a really good option) but you can use javascript with Unity too if you don't want to learn C# but I don't know if this feature is still usable.
You can just search unity 2d tutorials at youtube if you want free tutorials (My advices are Brackeys and Blackthornprod) or you can use sone online learning websites like Udemy (which I used to learn unity and which helped me a lot)

What would be a good diagram for designing React.js UIs before writing any code?

So basically, I mean something like UML for designing classes in Object-Oriented programming.
How can we use a diagramming software to design (model) our UIs (Components, props, states, event etc) before writing any actual code?
You can use the https://balsamiq.cloud/ for creating the wireframes of UI before starting the actual code.You can create the mobile view screens for different mobile versions in that.Later you can work on the screens wise.
Once the UI is done you may get the clear idea of what is needed in reactjs states and props values.
Pen and paper ... whiteboard. It might sound like I'm kidding. But I find this to be the best way to model your app. When I'm done with a whiteboard diagram, I take a photo if I need to share it.
It does two big things, imo: 1. it keeps things simple so you get the important stuff figured out without overcomplicating things so you get started coding; 2. it doesn't look too official or polished so you remember it's just a sketch. When it comes time to write your code, your established patterns and conventions should dictate your app architecture and your "wireframes" should just be a reference to look back on.
Again, just my own opinion. There is no single answer to your question.

what do I use for model and controller with Facebook's React and ES6

I'm a noob on react/es6 stack/framework. I was previously developing in Backbone/Marionette.js and recently started reading more about ES6 and React. Considering my background I'm used to having Backbone for Model and Controller (MC of MVC pattern). I have heard people using react with Backbone/Ember/Angular. What are your experiences and what are the different patterns that are trending in this area at the moment. I'll really appreciate you sharing your experiences/thoughts on this. Thanks in advance!
Facebook has proposed the Flux architecture as a way of flowing data unidirectionally into your React components. The idea is that you have a separate container (often called a "store") for all of your data. You register actions which run through a dispatcher and change your data, which then causes your view components to update.
There have been a lot of implementations of this idea. So far there isn't a single plug and play data model that's a no-brainer to use.
One implementation that has a lot of people excited right now is called Redux. Like React, it draws inspiration from the functional programming school of thought.
From the README:
The whole state of your app is stored in an object tree inside a single store.
The only way to change the state tree is to emit an action, an object describing what happened.
To specify how the actions transform the state tree, you write pure reducers.
So it's not exactly the MVC paradigm, but when combined with React you have a chain of events where the user triggers some action which changes the data and updates the view.
I recommend checking out the examples in the repo. It's a solid approach that's gaining a lot of traction. It also comes with a really neat dev tools. Hopefully in the future someone will be able to abstract away more of the boilerplate code.

How to implement Backbone boilerplate with views

I am trying to learn backbone, however truth be told, I'm feeling a little overwhelmed. Everywhere I look it is being done in a slightly different way, each with more frameworks and plugins to learn. So I have decided to put my faith in Addy Osmani and am reading his Backbone Fundamentals book. I have followed his recommendation and used the Backbone-Boilerplate. However for whatever reason, I have been unable to successfully install Grunt BBB so I cannot download the working examples.
What I am trying to do is follow this router section and use views. http://addyosmani.github.com/backbone-fundamentals/#router.js.
The problem is that I think these instructions are incomplete. For a start the collection.fetch() variable is in the wrong scope, and I really am not understanding where I need to place the views and how. I am pretty sure that if I could see a working example of this I could understand it, but as I said, everywhere I look its a different implementation.
Does anyone know how to use the backbone-boilerplate with routers and views? Are there any working examples anywhere?
Let me make a suggestion. A couple of months ago, I was where you are now: trying to learn backbone and trying to follow best practices while I did so. Like you, I came across Addy Osmani's book and like you I tried getting stated with backbone-boilerplate.
After much stumbling around, I eventually concluded that backbone-boilerplate was not something I needed to have while I was just learning backbone. It is now, only after having created a fully working, non-trivial CRUD application that I start to see how I might incorporate backbone-boilerplate. I think you probably need to be asking the questions that backbone-boilerplate answers (How can I break up my application into modules?, etc.) before you attempt to incorporate another framework or plugin. The same goes for Backbone.Marionette: great library, but you really need to have something to apply it to before using it.
Starting out, I would suggest having just a single file for all your backbone code.
One of the things that really helped me out was playing around with and extending various jsfiddle demos people had created using backbone. A simple google search will turn up quite a few. I found it a great way to learn as I was able to manipulate working code and get immediate feedback on what worked and what was allowed.
And although backbone is a client-side library, it's often simpler and faster just to ignore html and write stuff out to the console.
Finally, if you're willing to pay for it, I highly recommend Liam McLennan's set of backbone.js training videos on pluralsight.

MVVM with controller

I am developing a game in Silverlight. I have my game flow ready and graphics have also been taken care of. Now while searching for a perfect back-end design i came across MVVM. Went through various tutorials and have an understanding of how it would work with a single module. However in my plan i want to load/call multiple views at user input. Is there a way a single controller can handle my application workflow. It has been mentioned in the following post:
Controllers in MVVM, How to get info from viewmodel to it's controller?
But nowhere i could find an example. Can someone provide a dummy application, reading material, block diagrams?
You need to use framework to help what you're trying to do, otherwise you will end up write tons of code.
I have create similar application (show multiple view to user at a time) and I use Prism to help me. If you want to learn about it, you can walk through Prism Training Kit.

Resources