

Ask HN: Frontend eye for the backend guy? - reinhardt

From a backend developer&#x27;s perspective with minimal client-side experience, the modern Web frontend stack looks initimidating: HTML5, CSS, Javascript, Sass, Bootstrap, JQuery, Backbone, Angular, RequireJS and a whole bunch of more  tools and buzzwords I&#x27;ve probably never heard of, let alone the never ending fight with browser bugs, quirks and incompatibilities. Is there any decent crash course for experienced backend (or non Web) devs on getting up to speed with all this stuff?
======
throwaway420
The most important thing you can learn is that it's ok to not be a hipster.

It's ok to not be up-to-date with every technology choice. No matter how smart
you are, please realize that front end engineering evolves at a dizzying rate,
with new hyped up libraries, frameworks, techniques, and best practices
emerging all of the time. Even if you do front end stuff full time you'll go
mad trying to use half of what you read about.

I think that the best way to learn this stuff is to pick a problem that you
want to solve and learn the pieces necessary to solve it in a logical fashion.
You'll start out with HTML, try and style it with some CSS, and then add a
touch of interactivity with some JQuery. Then you'll start to have more and
more code and you'll logically reach out for tools like Sass, and RequireJS
and others to organize things when it becomes overwhelming. Then once you
start solving bigger and bigger problems you'll eventually look into Backbone,
and maybe other frameworks once you can't build a maintainable solution with
what you know. Learn stuff as appropriate to solve the problem you're working
on.

~~~
bl00djack
I agree, HTML, CSS and jQuery are like the very basic of Front-end, then u can
go onto Backbone, RequireJS or whtever new stuff come up

~~~
alanchavez
I'd say JavaScript instead of jQuery.

Before jQuery going mainstream there was Spry, and then it faded away.

If jQuery ever goes away, the good ol' JavaScript will still be there for us.

------
ebiester
Well, what are you trying to do? A product? A web application for enterprise?
Do you need to understand design, or are you just looking for the ability to
proof of concept something out, or are you looking for jobs that require front
end capabilities?

~~~
reinhardt
Mostly the latter; there are a lot of jobs that look for full stack developers
so being able to check some of the html5/css/javascript checkboxes, even with
the disclaimer that I'm far from an expert, could go a long way.

~~~
ebiester
I'd suggest Javascript: the good parts, and then the traditional "Take a small
page and recreate it" trick until you're ready to just start a project that
interests you. Start with bootstrap to lay it out, and go deeper as you need
to. Make it into responsive design. Put some touch events in.

jQuery really does smooth out a lot of the cross-browser incompatibilities,
but it doesn't excuse you from knowing javascript. Javascript: the good parts
is old, but still a good place to start.

To cement your JS skills, do the project in node.js. I think that really
helped cement how I think about JS, and it's not too far out of the way for a
backend developer to understand, callbacks aside. (Using a noSql store will
help in this environment, as there's no great SQL ORM solution right now and
your purpose isn't to get bogged down there.)

As mentioned, Mozilla Developer Network is one of the best documentation
sites.

From there, you can turn your jQuery site to a backbone or ember or angular
solution to see how that differs. Don't bother with all of them. :) If you can
do all that, you're going to be in pretty good shape.

------
bl00djack
I would say go step by step from html, css, JavaScript then jQuery. You will
get better understanding of front-end after that. Go to w3school and learn
those. You will have better understanding after at least two days or so
depending on your learning speed. It worked for me

~~~
shenaor
Agreed, but I find mozilla's guides less spammy and more specific
[https://developer.mozilla.org/](https://developer.mozilla.org/)

