• Nick Perich, over 7 years ago (edited over 7 years ago )

    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.
    2 points