How to implement Backbone boilerplate with views - backbone.js

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.

Related

I want to learn how to use populate() and aggregate()

For the past couple of months i've been learning how to code through looking at videos following along reading documentations and generally fiddling around.
I've been stuck countless amount of times trying to understand one simple thing after another, until I got fairly adapt at solving my own problems through quick google searches, recollection and repeating the same task.
But what i found the most beneficial to my learning was looking at other people's code and then trying to understand how it works, more specifically whenever there is a function i dont understand i look at a application online and see how the function is used and what the end result is the problem is I can't seem to find a fitting application for learning how to use populate() and aggregate().
I'l be honest, I never learned very well through just reading something and then understanding it, I only ever learn well when I myself am actively doing it and seeing the results for myself.
This is why i am asking you all in this wonder community if you know a application that actively uses populate() or aggregate() or makes it the main focus.
What i want to understand is how to use these two functions and when to use them, because while I understand their concept and what they are used for, in practice I just can't seem to understand at all.
Furthermore I am confused on where they are exactly used as well, I've only dabbled in react, mongoose and other generally associated npms to do with website making.
Please help.

How to understand the differences of Web Frameworks, Databases, and Libraries?

Where I stand: I am a junior in college. I have a solid background in Java and C++. I've been coding websites in JavaScript, HTML, CSS, and PHP (using MySql databases) since middle school. I have only just uncovered the magical box filled with these mysterious "frameworks."
My Predicament: After reading in my spare time wikis, blogs, and StackOverflow questions week after week for the past few months, I feel that I am no closer to understanding the items in this ominous list and how they relate to one another.
Yeoman, Grunt, Linemanjs, Bower
Nodejs, Go, PHP
Mongodb, Couchdb, MySql
Angularjs, Ember, Backbone
Terms like: boilerplate, scaffolding, frameworks, etc...
What I am asking: I understand that explaining any one of the above would be a question too big for a single Stack Overflow question, but that's not what I'm looking for. What I am looking for is a guide that explains in-depth what each of these groups are used for and if/how they can be combined (ex: using Angularjs with Nodejs). I am happy with a link if an article already exists, but I have yet to find an article that covers all of the above.
El Fin: I love learning new languages (especially for the web), but right now I feel like I'm blinded, running around in circles like a chicken with its head cut off. A shove in the right direction would be great :)
I'll put this in as an answer to help clarify why this is too broad.
I think that the GREAT BIG point you are missing is that there are specific reasons someone chooses a particular framework or server environment when they start a project.
This is all dependent of a boatload of things that like budget, knowledge, availability, expected scope of the project, etc... It also may come down to, "I'm starting this new project, what is available in this work environment for me to use?"
Then you don't really get to choose. You get what you get.
So what's the best package of technologies to use? That SO depends on what you're doing.
Example: If you are building a simple site for a local store that just needs a few pages, and you want to keep your costs low. A simple LAMP solution would work fine. But if you want to design the next Facebook, even though the core of the system could be build using all LAMP (and it in fact IS), you will need MUCH more powerful servers, and MUCH better and more efficient coding. Not to mention a boatload of server space for both the site AND the database.
In many cases, when you see people pooling together what might be considered obscure technologies, all they really break down to are collections of libraries. It's like choosing JQuery over some other JS library that essentially does the same thing. One may be better than the other. But you go with what you are comfortable with.
So, when you are asking about how, why, and in which way, do people combine technologies together, there is no way to answer that at all. Other than to say, it's specific to their needs. And that's about it.
Reading articles that compare all these different things together will only give you an idea of what they are capable of, and what their limitations are. In the end, it's always a matter of opinion what is better. Otherwise we would all be coding with the same thing.
For my part, I prefer PHP over ASP. I prefer working straight out of a text editor than using an IDE or any MVC framework. I use jQuery where it's needed, but don't over use it.
But that's just me.
And I'm sure this still didn't answer your question.

Is there an interactive tutorial for Backbone that resembles the one for Knockout?

I've been evaluating JS libraries and frameworks for the company I contract for, and the best (for our needs—I'm not saying these are the best for every circumstance!) appears to be either Backbone or Knockout. I lean towards the former1 but I really like the interactive tutorial for Knockout, and think it would help drive acceptance among the other developers.
There are many tutorials for Backbone, but a big advantage I see of the interactive Knockout tutorial on the official Knockout site is that you just open the page and start playing with code immediately, and see results immediately, and it quickly becomes apparent that learning (at least the basics of) Knockout are not a big and formidable undertaking. Suppose I have exactly 1 minute worth of attention of another developer to overcome the resistance to being told a particular JS library is easy to use and will save him lots of time. The Knockout tutorial is a big winner when presenting to a not-necessarily-motivated developer. With other tutorials you're still reading a description of what the library is and will do. You almost might as well hand them a 500-page WROX book and tell them to read it.
Where can I find something comparable to the excellent Knockout tutorial, but for Backbone?
1. Mostly because I'm already familiar with it, and the things which Knockout offers that Backbone doesn't can be easily added. That might be true in reverse as well, but since I know less about Knockout it's not obvious to me if it is.
Have you seen ChooseYourOwnApplication.com? It will allow you to walk through the same problem through any combination of Backbone/Knockout/JavaScript/CoffeeScript. It also includes options of different server side technology. One of the big advantages is that you see the strengths of the stack though the process of implementing the same web app. It does not include an interactive editor however.

gae-boilerplate documentation

In my search for a good social login package for App Engine, I am giving gae-boilerplate a try. But I find there is no documentation except the readme file, which I think it is not enough at all.
I have many questions, among them:
Should the boilerplate be used as a library or download and modify as needed?
How should the boilerplate be updated?
What does each model do?
Where should my templates go?
Should I have a different routes file?
Should I derive my Handlers from BaseHandler?
In general, what things should I implement in my pages? For example, I found out that I have to include a csrf_token in all POST requests. It would have been nice to know this in advance, and the many other things that I'm having to find out along the way, and which I implement without being sure if I'm supposed to be doing that.
And some more...
My biggest problem is that Social login is not working, and I feel this boilerplate is a big monster with which I don't know where to start. To make things worse, it is hard to debug social auth from any machine that is not the production one. Thats why I'm desperately looking for some docs.
I have not found anything in SO, and I guess there must be more people in my situation. So, any pointers to documentation that could help to understand gae-boilerplate a little bit better would be very appreciated.
EDIT: I switched to gae-boilerplate in a site that I had previously working. Maybe most of my problems come from the way that I have tried to integrate gae-boilerplate and my existing site. As a result I have tried to treat gae-boilerplate as a library, and keep my own templates, handlers, static files and such.
Thank you guys!
EDIT 2: After trying other options, I have to say that I am very happy with gae-simpleauth. It works really well, and Alex's support is superb.
I will try to answer most of your questions below:
Should the boilerplate be used as a library or download and modify as needed?
You can modify it as needed based on your specific requirements.
How should the boilerplate be updated?
What do you mean?
What does each model do?
User and SocialUser are pretty self explanatory. LogVisit and LogEmail are used for auditing purposes.
Where should my templates go?
In the templates directory
Should I have a different routes file?
No, you can use the existing file for all your routes.
Should I derive my Handlers from BaseHandler?
It't not mandatory but I would recommend to do so. BaseHandler is very handy and provides a lot of good stuff.
In general, what things should I implement in my pages?
What exactly do you mean?
In general, you can use gae-boilerplate as a reference on top of which you will built your own project. Study the code step by step, try to figure out what is the purpose of each file and library used and how they work together. This way you will gain good knowledge of a lot of things like jinja templating, oauth2, etc.
Hope this helps.

Making development with Ext JS fast

Ext JS is a nice framework for web UI, but I found that building and putting stuff together takes a long time and painfully slow.
This might be a general problem when working with JavaScript, but does anybody have any way to speed things up?
What can I use? Better IDE with good JavaScript suppport? GUI designers? Code generators?
I need some way to speed up common things like building grids and forms but yet let me do complex things like creating custom components easily.
I'm using ASP.NET MVC. Coolite seems nice at first, but I feel that I'll be having trouble when creating any custom components later on.
There's always Ext GWT, which lets you use Eclipse tooling (and all of the advantages that gives you, such as refactoring, swift code navigation, etc.) to create your Ext/JavaScript app.
When you download the ExtJs library, you find lot of sample applications for common requirements like Grid panel, forms, form elements etc.
Regarding IDEs, you dont find mature productive tools, but check the below link and wish it could be of help to you
http://www.extjs.com/blog/2008/02/01/ides-plugins-and-tools-for-ext-js-20/
But if you really wish to develop custom components, you need to get through knowledge,start approaching with ExtJs-provided sample apps.
If you want to get faster at anything, practice it until you fully understand how it works and how to make it do what you want. If you are just starting out, why would expect to be able to work as quickly as you do when you are working on something that you are very familiar with?
Things I use to make ExtJS less painful
Chrome, for it's developer tools, or Firefox with Firebug.
snipMate: snippets for Vim, so I can quickly produce boiler plate code for classes.
JSLint as a command line tool. Especially good for detecting rogue commas.
Sencha forums.
ExtJS IRC chat (Server: irc.freenode.net Room: #extjs).
API documentation.
Sencha and Saki's ExtJS examples.
Beer.
ExtJS is building a designer right know so you can look forward it, the only problem I think is not gonna be free.
you can see a video demo there, in term of release date I think this is due to the first quarter of this year.
I say learn the framework. But to develop apps, I use IntelliJ IDEA, which has partial code completion, etc. It costs money though.
Once you have some practice and understanding of how ExtJS works, you'll get faster at it. By using the examples for reference, and building up my application in small pieces, I've gotten much better (and faster) at developing stuff with ExtJS. A great way to get started is to find an example (or two) that kind of do what you need, and modify (or combine) them to see how they work together.

Resources