Hi Drew,

The bar to entry is indeed too high! Especially when it doesn't need to be at all. If you're just looking to prototype take a look at a boilerplate I built a while back for React. It's just HTML, CSS and JavaScript. https://github.com/jarsbe/react-starter-kit

There's nothing worse than getting caught up in tooling and build processes. Before you know it your fleeting idea will be gone before you've even setup! Keeping the system simple is essential.

If you want something production ready take a look at the webpack version. https://github.com/jarsbe/react-webpack-boilerplate

Feel free to email me jarsbe @ gmail dot com - I'd be happy to help.

If you're a true javascript beginner, start with jQuery (use Jon Duckett's Javascript and jQuery book). Eventually add Firebase to get a feel for interacting with a backend without wasting time now on the ugly process of starting backend dev. Backend data management has complexities which are very different from those of UI or app development and if you're a designer you'd probably rather not bother.

When you want to go further, first you have to select a javascript framework.

I recommend using React or Ember depending on taste. If you have friends or coworkers who use either, go with that one at first---being able to ask questions to live people helps! Just avoid Angular. Seriously. It was designed by and for backend Java devs. I would argue it isn't a good solution for UI engineering in general, but it's certainly not good for a designer starting out with app development. I think Backbone and that generation of frameworks can safely be leaped over if you're starting out now.

The Ember CLI is supposed to be easy, but I use React. Here's the quickest way to go from 0 to walking on a new Macbook with React.

Learn the Basics of React

Go through React tutorials. The one in the official docs is good. You really don't need an environment set up for this. Read a lot to get a vague sense for the lingo and what's going on. Write a lot of code to actually learn it.

Get Ready For a Dev Environment

• Install Node.js and Git from the website or using Homebrew.
• Open the Mac app Terminal (use Finder and type "terminal") and Google for basic usage instructions (first just learn moving between folders with cd ... and listing contents of folders with ls).
• Install Webpack from Node's package manager by typing npm install webpack -g.
• Create a new folder for your project and move to it in Terminal.

Start a React Project

• Use git to clone a React starter project. Avoid starter projects with lots and lots of features. Even if you end up adding those features later, you won't know what they do at first so they'll just be confusing noise. I recommend React Hot Boilerplate. When in the new folder, type into Terminal: git clone https://github.com/gaearon/react-hot-boilerplate.git which copies this code to your machine: https://github.com/gaearon/react-hot-boilerplate
• Type npm install into Terminal to automatically install all the dependencies that are listed in the package.json file you copied in the previous step.
• Then just type npm start to begin developing! You can see the app by typing localhost:3000 into your browser.

This project contains "hot loading" which lets you see updates to your app immediately any time you change the code without losing state! Perfect for designers! You will need to read about CommonJS module loading. With Webpack from within javascript you can load images, css files, markdown...whatever! It can also handle SASS compilation if that's your thing.

Later Steps

• Add a flux library only once you realize for yourself why something like a flux architecture is needed. And, yes, something like it is needed. I recommend Reflux because it is the simplest to understand and get started with (ignore its huge API...the long documentation is just explaining various ways to do the same things).
• Look into Digital Ocean for hosting/deployment. Or Heroku, which is less designer friendly but has a free tier which is nice for learning.

I feel like I'm at a similar place. I've been busting my ass off to get a continuous deployment system running through github webhooks and it really could have been easier.

The thing is, some of these things we're trying to achieve probably seem very basic to developers. So when they're writing about them, they probably just assume that their readers already know what they're talking about or don't even consider the possibility.

I've noticed that most of the tutorials online seem to require some level of a proiri knowledge without explicitly stating what is required.

I think this is the main reason why barrier of entry is high.

As a side note: I've been really digging Firebase lately. Handling the database connections through a very simple API makes things a lot easier for people like me.

I suggest using http://yeoman.io for setting up angular apps. It saves tons of time, so you don't have to set everything up yourself.

For scaleable backend deployment and db management I would use https://www.heroku.com. It's free for simple development and is really powerful by letting you deploy and build with git.

I'll tell you that it's sometimes hard to wrap your mind around a framework that was built to solve a particular pain point if you've never experienced that particular pain.

My advice is a little round about, but build a few somethings (small small apps) in jquery using the plain old DOM, interacting with a few external APIs, and you might find that you start to figure out a few tricks that are the basis of these frameworks. Place a bunch of state in the DOM and have it get messed up, fix a bunch of bugs related to disappeared elements with event listeners, and soon you'll start placing state in some central store and use data properties to toggle your events, etc. etc. and you're half way to using react.

Start using lodash and learn a bit of functional style programming and you're getting even closer (actually, this is huge, try not writing for loops for a while and you might find you never really want to use them).

There are a lot of ideas in the new frameworks that perhaps you've never heard of or known that you wanted, but after feeling the pain of the old ways, you really appreciate them and learn them better.

I'm not quite sure what you mean by up and running? With angular you simply add the dependencies to your document and get working.

What exactly are you trying to accomplish? For the first side project, you might want something simple, so you can focus on the code and not the environment/setup.

I recommend checking out ember-cli with the Heroku buildpack if you're looking to play around with Ember.

Hi Andrew,

Maybe you should try Meteor (https://www.meteor.com/) and use Modulus (https://modulus.io/) to deploy the app in production.