Ember with Node (MEEN stack?) - node.js

I've been building apps on the Rails platform for over a year now. That being said, if you can make any comparisons to the Rails equivalent, it might help all parties involved. Just a thought.
Anyway, I'm trying to wrap my head around node, and the front end framework, ember. I was originally intrigued by stumbling across the MEAN stack. After digging into that a bit, I realized I didn't really like angular all that much, and started looking up alternates. Ember seems pretty awesome, and the syntax seems much cleaner without all of the ng- markup to the DOM. I'd like to experiment with mongoDB, and I feel like this approach will teach me a lot.
My question, I guess, is Express. What is the role of Express when using Node? It seems that Ember (even Angular, for that matter) has a pretty expressive router. In my limited understanding of it all, I thought Express was for routes? I found this, which seems to be a MEEN stack of sorts.
The package.json for MEAN is massive, but that MEEN I linked to, is very tiny, with just express, mongoose, and request. Another question, I suppose, is what are the different roles in a MEAN / MEEN stack? Does that make sense? I'm rambling a bit, lol, but I'm hoping to keep researching and playing with this stuff until I have that 'Ah ha!' moment, you know?
mongoose - seems to be a better way of interacting with mongoDB?
express - routes specific to node?
request - seems simple enough. send external requests to other pages on the web. I can't see what the equivalent package would be in MEAN, is this truly needed?
grunt - runs a bunch of stuff so that all the different parts play nicely together?
Any explanations, links, or help are greatly appreciated.

If you're coming from Rails I'd break it down like this:
node.js -> Ruby - your server side language / platform
express -> Rails - your server side framework, although a little more like Sinatra
grunt -> Rake - your preprocessor / build tool
npm -> gem - your server side package manager
Angular.js / Ember.js -> No direct map, your client side framework.
mongoose.js -> ActiveRecord, but for MongoDb. If you want a SQL ORM use Sequelize
Two other tools worth learning are
bower -> your client side package manager, for things like bootstrap
yeoman -> all round js app scaffolding, ties everything together, a great tool to see how to scaffold "best practice" apps.

Related

How to build a UI with typescript/NodeJS

I'm absolute new to this topic. I want to learn Typescript using NodeJS and have some simple questions. NodeJS is working with Javascript, as far as I know, but how do you get an UI? Do you have to create a HTML/CSS Webpage and run it with Typescript? How do you get Images, Options, Buttons in Typescript? How are they implemented in the Code? I found a lot of Tutorials, but they just return "Hello World" and I don't think I have to "write" the whole page in an output in Typescript.
NodeJS is pure server side javascript, you wont build the UI with it, you would serve the html/css/js to the client, and maybe create an API to communicate with the client.
I assume you dont need an example how to create a Node project, as you stated to have read some tutorials about it.
For starters, i would advise to go for NodeJS plus Expressjs on the server, then maybe start to serve simple static websites (like a handwritten 'index.html'). Expressjs makes development especially in the beginning a lot easier. Serving static files would just need something like
app.use(express.static('public'))
..in your server code. If you navigate then to e.g. localhost:3000/test/route, it would look for the /test/route/index.html in your public folder (which should be in your project root)
Then use a framework for client side development.
If you want to use Typescript for the development of the client side of the app, you might want to look into Angular. It is pretty tightly bound to Typescript, but the learning curve is pretty harsh if you are a beginner with this. Other client side frameworks that work well with Typecsript pretty much out-of-the-box or via cli are Vue.js and React, just as examples.

Node Js and Express: Where can I find free simple projects to learn and read the code?

I just completed basic tutorial about Nodejs and Express. Where can I find free simple projects to learn and read the code that will cover much of nodejs and express?
Sign up for freecodecamp it's a open source project to learn fullstack Javascript (frontend, data visualization with react.js and backend with node.js and mongodb) it has free tutorials and real world projects to do. Once you complete the all projects you can work on real programming problems for non-profits to build your portfolio.
If you don't know them already, maybe these might be useful:
https://github.com/wercker/getting-started-nodejs
http://amirrajan.net/nodejs-by-example/
Other than that, I am permanently learning tons of stuff by looking at the npm packages in the node_modules folder. Especially by reading the tests.

AngularJS app packaging for autonomous application

I wrote an angularJS app (with nodeJS and ExpressJS as my server). My app is totally independent from the server (I used pouchDB for the data). I would like to create an app/package that can be run from a computer or tablet. How can I do that?
I'm sure there are already lot of questions/answers about this topic but I couldn't find the right solution so I apologize in advance!
Thanks
If you r looking for an full-stack framework, i can really recommend Ionic.
It is a framework, that contains it's own customizable ui-framework(build on sass bootstrap), it is build on cordova aka phonegap and makes it easy to deploy and test the code on android, ios, ... . It is also optimized for angularjs and offers for most functions a directive.
I really love it. I did write a blogpost in german: kkonstantin/ionic
Maybe take your existing frontend javascript code and make use of a css framework, to make it look great for all window sizes.
Like: Ratchet (build on bootstrap)
Then you just make use of Phonegap to deploy your html/css/javascript code to the plattforms.

Re-using backbone routes, models, and views on the node.js server

I am trying to build an application which both works as a SPA and as a normal application without re-writing any of the code as much as possible. My research has led to believe that this could be very possible using node + backbone (on both the server and client). I have found some resources on how to do this but nothing truly complete. Have anyone tried a full solution to re-using all the code?
The resources that I found:
Re-using backbone models on the server: http://blog.andyet.com/2011/feb/15/re-using-backbonejs-models-on-the-server-with-node/
Re-using backbone views and layout manager on the server:
http://vimeo.com/46033641
I have also found some frameworks that achieve this such as (bones, derby, meteor), but I dont feel like using such a framework is the best solution since I still want to have full control over backbone and node.
What you are trying to implement is Resource-View-Presenter model. Please read this article completely http://blog.nodejitsu.com/scaling-isomorphic-javascript-code. It provides much needed insight for isomorphic code that can execute both on the client and the server. It also helped me understand various models and architectures.
What backbone.js uses is traditional MVC framework, which cannot work on both client and server without modifications. So if you want to stick to backbone.js you will face this disadvantage sooner or later. I tried backbone too and found no easy way to do that.
I tried looking for RVP frameworks on node.js, but it is still new. I would suggest you look into flatiron.js http://flatironjs.org/. It is based on Resource-View-Presenter model, the only one I could find for node.js. Some changes will be required to implement on both server/client, but it is not much. You will find it is similar to backbone.
Hope it helps you to find the right path.
I recently did some research on the field and found some interesting projects that are using the same backbone code on the client and server (nodejs).
Project 1
The first one was introduced by Keith Norma from Groupon. He managed to reuse backbone router + templates on the client and server.
App demo: https://github.com/keithnorm/SpainJS-Pipedream-Demo
Presentation at SpainJS talk: http://www.youtube.com/watch?v=jbn9c_yfuoM
Project 2
The second project is Rendr presented by Spike Brehm from Airbnb but not released yet to the public. It seems a bit more ambitious as it also trades backbone model and collections to the nodejs server. You can read more about it here: http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product
UPDATE: Rendr code has been released: https://github.com/airbnb/rendr
Project 3
There is another project that also allows to share backbone code between client and server: https://github.com/developmentseed/bones

Yeoman and ExpressJS

I want to know if there is some boilerplate code to use a frontend workflow tool like Yeoman with a backend framework like ExpressJS, if I want to maintain the same codebase for both the front and back ends.
Basically I want to know -
How do the boilerplate code produced by yeoman and express fit in together. Is there a way to integrate the two? (How does the gruntfile fit into the express project)
Can I substitute yeoman's default watch with an express server which reloads pages on update?
Yeoman is currently focused on front-end app development, but we're going to explore back-end integration in the future.
No, actually there isn't any right now.
But you can combine express.js with the component package manager. There is some work left, and you cant use yeoman components in component.
To answer your questions
You can look for components in the component repo that you have used in yeoman. Not the same, but might be a solution.
Use the module supervisor for this. You can get it via npm
I haven't found an easy way of integrating my own Express + H5BP + Angular + Grunt skeletons into Yeoman, and eventually just settled for creating a repo here: https://github.com/ericclemmons/genesis-skeleton
From what I've read, there are projects underway to add express generators, but eventually stacks are going to get complex enough to where you'll have to maintain your own starter app, rather than generating it.
There's an experimental branch with yeoman + express.js G+ Yeoman/Express Article
I found yeoman.js to be very cool for rapid prototyping but does require some ramping up to get used to the various tools it's "opinionated" about. I've decided to go over each of the core tools in some vids that are hopefully helpful: yeoman.js related videos
Yoeman fullstack generator now generates both front end and back end. Other interesting frameworks which do the same are Sails JS and StrongLoop
It is worth noting there is an express-generator project:
official docs
npm page
I am going to give it a go - because I'm folling this tutorial - but other than that I cant comment on its value.

Resources