12

Ask DN: Easiest way to get up and running with modern front-end frameworks?

almost 6 years ago from , Freelance UX Designer

I'm a UX designer with enough code skills to be dangerous but not enough to figure out how in the hell to get Angular or React/Flux or [fill in your favorite future framework here] up and running locally, let alone to deploy them when it comes time for my side project to see the light of day.

I've found a few things that seem to point in the right direction, like this "ultimate seed", but the bar to entry is still frustratingly high.

It seems Docker can help here; it seems maybe we're within striking distance of this being a solved problem. Or maybe there's a solution out there already that I haven't found yet!

Any ideas, DN? Is there something I'm missing, or are we stuck with muddling through and hoping we get it right ? Stuck with needing our nerdier friends to help us out?

13 comments

  • Jack CallisterJack Callister, almost 6 years ago

    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.

    5 points
  • Nick Perich, almost 6 years ago (edited almost 6 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
  • Ege GörgülüEge Görgülü, almost 6 years ago (edited almost 6 years ago )

    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.

    2 points
    • Elizabeth AdamsElizabeth Adams, almost 6 years ago

      Same story here. I'm a self-taught designer+developer who doesn't any longer need the hand-holding of most tutorials, but I do need a helpful guide or mentor to get me through the setup phase of a lot of these frameworks. Once the setup happens, then I can Google my way into using them, but most developers on forums out there are just like, "easy peasy, just do X, Y, and Z, etc etc" and it's like they're speaking a foreign language.

      2 points
  • Eli SladeEli Slade, almost 6 years ago (edited almost 6 years ago )

    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.

    2 points
  • Duncan ReganDuncan Regan, almost 6 years ago

    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.

    1 point
  • pjotr .pjotr ., almost 6 years ago

    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.

    1 point
  • Clark WimberlyClark Wimberly, almost 6 years ago

    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.

    1 point
    • Drew Beck, almost 6 years ago

      I have a web app that I want to develop. I've been using angular extensively at work and really dig it and think it would be great for my project.

      My frustration is that the environment/setup still takes a level of knowledge that feels super arcane to this particular semi-nerd/designer, while the coding itself is actually totally manageable.

      2 points
    • Duncan ReganDuncan Regan, almost 6 years ago

      Don't know if you'll still pop in here. But to start writing an app in angular you just need to put this:

      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

      in the head of an HTML file and off you go.

      Write you application code in a .js file and import it after the angular script.

      0 points
  • Kelly SuttonKelly Sutton, almost 6 years ago

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

    0 points
  • Pedro PintoPedro Pinto, almost 6 years ago

    Hi Andrew,

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

    0 points