Ask HN: Overwhelmed with learning front-end, how do I proceed?

255 points by PythonicPro ↗ HN
Hey, I am currently learning front-end (knew jQuery but after many recommendations and doing backend for a long time decided to "modernize") with Vue.js components, etc... but feeling very overwhelmed with the big change, and after trying tutorials I don't know how to begin coding a real app, even after learning the concepts. Everything I try feels messy and strange, leading me to a lot of frustration. It seems very over-engineered.

I also wanted to start trying react but the sheer amount of boilerplate templates to start a project is insane and come with so many things I probably won't use. The file trees seem massive in comparison to simpler projects made in jQuery, which don't help the stress much...

Overall, I am very overwhelmed with what I am seeing in the front-end world, how do I proceed? I don't know how to continue this. Any tips? Experiences?

135 comments

[ 2.8 ms ] story [ 194 ms ] thread
build something very small. like a simple compound interest calculator, for instance. push it to github. blog about it.

then build something slightly larger

build mini-projects. I made https://enlight.ml - and although it's still a work in progress, it teaches small projects related to web development and ways to actually implement for knowledge of html, css, js, etc.

Let me know what you think! I plan to evolve it by building a codeacademy style interface for learning these projects...

The tutorials look good, but I already have a base knowledge of JS and frontend- just looking to begin making SPAs and using React or Vue, which I can't seem to get a grip on. There's so many loose components in them it's overwhelming :(
What do you mean by "loose components"?
I meant dependencies, for example vue-router, react-router, vuex, redux, etc
Ah, thought you might be referring to actually writing component-based logic and UIs.

Yeah, React is very much a pick-and-choose-for-your-own-situation kind of a tool. Somewhat true for Vue also. This is both a strength and a weakness, somewhat depending on how much you like to be in control of exactly what pieces you're using.

1. Don't try to learn 5 technologies at once. Pick one.

2. As a first pass, don't overfocus on the details, focus on the conceptual model: what are the key abstractions, how do they work and how do they interact?

3. Read a book, not just tutorials. Harder for newer frameworks, but got to be something. A decent book will give you a much deeper view than a tutorial, helping you with item 2 on the list.

4. Start looking for common themes that connect to existing knowledge. None of this is really new stuff; front end frameworks inherit ideas from GUI frameworks, and from backend web frameworks. I've written a bit about doing this for programming languages (https://codewithoutrules.com/2016/03/10/compare-contrast/), but same concept applies elsewhere: everything is variations on a theme, basic functional requirements forcing particular forms.

Thanks for the tips! Any books you'd recommend for learning modern front-end?
Nicolas Bevacqua's JavaScript Application Design: A Build First Approach isn't a bad place to start -- Manning has a few books on SPA design and development that are well-suited for experienced developers who are new to modern web front-end dev.
Front End Developement, by Nerd Ranch 2016

There's a ton of Front End delevoment books out there. They go stale pretty quick, or are terrible edited. Try to by the book used. Most people buy books, but don't read them. I honestly don't know if books are the best way to convey this stuff.

I've found the 'You Don't Know JS' series very helpful for understanding JS from the ground up. In book form or for free via !gh, https://github.com/getify/You-Dont-Know-JS.
You Don't Know JS has to be the best and most detailed book about JavaScript that exists. It might be a bit much for a beginner, so just skim it at first and come back when something doesn't make sense.
Got some pointers for you. First, I keep a big list of links to high-quality tutorials and articles on React and related topics, at [0]. As part of that list, I have a page called "Basic Overviews" [1], which has articles that try to help clarify what these various tools are, how they fit together, and what you would use them for. There's also a couple articles in that section that give advice for how to tackle learning front-end stuff, and not be overwhelmed.

As for React specifically, there's an official tool from the React team called Create-React-App [2]. It hides the details and complexity of project config from you until you're ready to tackle them yourself, and lets you focus on just writing the app. Meanwhile, the React docs were just revamped and improved [3]. There's also a great community called Reactiflux on Discord, which is a set of chat channels dedicated to talking about React, Javascript, and React-related tools [4]. It's a great place to hang out, ask questions, and learn.

Finally, part of what's going on here is that people are trying to write highly complex and powerful applications in the browser, not just "pages" with some interactivity. Complex applications mean some meaningful amount of complexity in the project setup. These tools are basically the web equivalent of a C++ compiler toolchain and standard library. So, there's several aspects here: the tools are somewhat big, the libraries are sophisticated to enable you to manage your application's complexity, and your own app code is going to be more than just a couple click handlers.

The other thing to remember is that you don't have to use everything all at once right away. Focus on learning one or two tools and concepts at a time.

Hopefully this helps!

[0] https://github.com/markerikson/react-redux-links

[1] https://github.com/markerikson/react-redux-links/blob/master...

[2] https://github.com/facebookincubator/create-react-app

[3] https://facebook.github.io/react/

[4] http://www.reactiflux.com

Wow, thanks for the link list! Will definitely take a look. Also create-react-app looks like exactly what I was looking for, very bare and to-the-point.
OK, I know a lot of folks are tired of me talking about it, but if you are interested only in UX functionality and not necessarily in learning the latest trendy tools, I have built a library that gives you a lot of what the other front-end libraries do at a fraction of the complexity:

http://intercoolerjs.org

Basically you use HTML attributes to drive AJAX requests, and render your HTML on the server side. (There are actually very good theoretical reasons for doing this[1][2].) It is built on top of jQuery and dovetails very nicely with it.

There are lots of examples here:

http://intercoolerjs.org/examples/index.html

And, again, if you are looking for simplicity in front end development, while still building a modern web application, I think it's a good option. There is no tool chain beyond what you currently use for web development.

[1] - http://intercoolerjs.org/2016/01/18/rescuing-rest.html

[2] - http://intercoolerjs.org/2016/05/08/hatoeas-is-for-humans.ht...

I created an account to say this: thank you.

Having spent hours and hours trying to find to find my feet in the world of competing JS frameworks and gui libraries a friend said "Just search for 'declarative ajax' and click the second link". Good advice, because it led me to intercoolerjs. It's just so straightforward. Twenty or so minutes later I was back in emacs generating Django views because I knew, intuitively, what I needed to do to actually get things done.

It's hard to explain to people how quickly you can get working with it but something like:

    <a href="#" ic-target="#datadiv" ic-get-from="/latest_data/">Get Data</a>
is basically pseudocode. I love it.
I'd never heard of intercoolerjs before, and was going to comment how introducing another framework to the discussion was counterproductive, but then wow I checked it out.

It's exactly the improvement on jQuery the OP asked for, and thus fits that mental model perfectly. It is also so logically designed it basically requires no documentation - I read the introduction and a handful of examples and thought, "shit of course it works this wasy" and could basically derive how every other feature mapped to its implementation in that moment.

Congratulations!

> Intercooler is a sturdy, quiet alternative in a web development world of noise and complexity. I'm happy with that.

love this and thanks for sharing. your intro/docs page is very well written in that it progresses very well from simple examples to more intricate examples. very well done!

Not sure if I'll ever use it, but intercooler.js would be great for many use cases (that usually end up being implemented using a hugely complicated stack).

The only reason I probably wouldn't use it is that I'm happy with just using browser APIs directly for the small stuff.

I'll just say that the examples make intercooler.js seem much more complicated than it is, until you read closely enough to realize that most of the code is Mockjax and backend implementation. You'd do well to split the view into two parts: frontend source code and server-side source code.

Ok, just spent my Sunday playing with intercooler.js library and I am so pleased right now. I have plugged that right into my flask app and got it working like butter with flask-paginate and flask-table and Ajaxified nearly all-the-things in an afternoon. I've been dreading taking this on as I could have easily lost months trying to get this-much-shit-done screwing around trying to become javascript/react/vue guru. Awesome work man, great stuff.
Wow, after reading the docs and several examples of intercoolerjs, if you ask me to describe it with one word, it'll be "simple", two words, "no over-abstraction", three words, "easy to pickup".

I develop desktop software for Windows, but I'm also interested in the web development techs - although haven't done any real-life web apps, I have read a lot of docs about most of popular frameworks you can list here. The first framework that got me think "cool, it's natural and simple" is Angularjs 1, maybe because it's so similar to the good old Delphi's GUI framework called VCL (Visual Component Library - yes! Component!), but you all know the story - it's "killed" by angular 2 and the version 2 feels so complex and so over-engineering to me :P

Now intercooler.js gives me a feeling similar to the one when I first landed the angular 1 homepage - it's not the same of course, but I think both of them made me think "natural" and "simple".

Maybe you think, well, you are not a web dev, but trust me, I've writing software for a living for over a decades, I know the pain of a framework when being over-abstraction, over-engineering, or being bloated. KISS, is a rule that fits in all fields, I guess.

This is really clean and simple and looks like it can grow with needs. I don't think I would have come across it in the framework noise if you hadn't tied it to the issue here and spoke to it.
I work with an application that wasn't built with "new" javascript standards, so migrating everything over to the component, reactive, built standard will take us some time. In the interim, we started using Intercooler, and it's awesome. If I were starting a project fresh I don't know that I'd go this route because I like the deep customizability of a well-designed JS app, but for simplicity, Intercooler does an awesome job.
One tip, Redux is great and is worth learning but if you want to curb the amount of boilerplate and anxiety-inducing added conceptual overhead look no further than mobx. And good news, after a quick search I found that someone has made it one git-command away to implement a simple redux counter on top of a fresh create-react-app template(https://github.com/mobxjs/create-react-app-mobx). Mobx is able to drastically reduce boilerplate and cognitive overhead while still allowing the flexibility to dive deeper and gain just as much granular control as you'd have with Redux. Also it scales well (although that shouldn't really be a big concern if you're just trying to learn how to build production react apps right now).
Is there any specific reason you are trying to use Vue?

If not, I'd recommend taking a step back, look at the few most popular options, and start with the most "blessed" config/boilerplate with no custom changes.

Like for react, use the create-react-app thing. Don't add anything on top aside from what is needed for the bare minimum of your project you are learning with.

Feel the pain points, feel what you struggle with, make notes about what works well. Then when you have a minimum viable product, start adding "stuff". Maybe try out redux, or mess with webpack yourself, try out that library that you see people on HN bitching about all the time to see if it's really that bad. Just start fixing the worst issues you had with the language/stack, and understand how the additional tooling solves (or doesn't solve) your problem.

Don't worry about size, number of files, performance, how messy it is, how over engineered it feels. Just make something first. You'll have plenty of time to learn that other stuff once you have a good foundation. And at that point you'll know to leave out x, or that y isn't over engineered, it's just engineered.

Rome wasn't built in a day. Expect your first few things to be complete trash, and don't worry about it.

What's wrong with Vue? Sure it isn't as widely used as React or Angular but it isn't a small fry either and growing quickly. Plus it is a great first framework because of the fabulous documentation and learning resources available. I also found it to have a much simpler syntax than Angular (I can't comment on React).
Why can't you comment on React?

I don't really like Vue.js after coming from ReactJS, main reason is how hard is it to create components, which is the main attraction of React.

This is ReactJS code for a List group that has list items which are composed of buttons, can anyone post the Vue.JS equivalent code?

var Button = function(props){

return <button>{props.text}</button>

}

var ListItem = function(props){

return <div>I am a item <Button text="click me" /></div>

}

var ListGroup = React.createClass({

  render: function() {

    return <div>

    	<ListItem name="hello"/>

    </div>;

  }
});

ReactDOM.render(

  <ListGroup />,
  document.getElementById('container')
);
I'm not versed in React but I think this achieves the same thing -

1. Create your custom component:

  var btnComp = {
    props: ['text'],
    template: '<div>I am a button <button v-html="text"></button></div>'
  }
2. Register it:

  new Vue({
    el: 'body',
    components: {
      'custombtn': btnComp
    }
  })
3. Display it:

  <custombtn :text="'hello'"></custombtn>

That's anything but hard. Here: https://jsfiddle.net/v5s77r2x/.

*Updated with simpler code and JSfiddle example

It can even be closer to React than that, especially with JSX render functions. You don't even need the view to name itself:

    export default Vue.extend({
      props: ['text'],
      render() {
        return <div>I am a button <button>{this.text}</button></div>;
      }
    });
PS: This can be cleaned up even more with ES6/ES2015 syntax.

See https://babeljs.io/blog/2015/06/07/react-on-es6-plus

Thank you for that link! I am starting in react and there is a blend of ES6 and ES5 in the tutorials (maybe even within the official react tutorials?). This hits the spot in clearing up some confusion for me.
Just a question. Why would you create a new button component when the only thing it does is return a <button> html element with text inside. Why not just do {listitems.map(listitem) => {return (<button> {listitem.text}</button)}}. I think react facilitates unnecessary boiler plate logic like that. When in reality a component should probably do more in order to save code if it's going to be created at all. Just my opinion. Open to other people's thoughts on this.
I remember when I could show a button with nothing but an html element. Things sure have improved since then!
Please stop the fanboyism. OP did not say there was anything wrong with Vue, but asked if there was any specific reason it was chosen, and suggested they try something that comes with good preconfigured defaults to avoid being overwhelmed by all the choices. Which you completely fail to address in your canned sales pitch.
Vue comes with good preconfigured defaults, see vue-cli;

https://github.com/vuejs/vue-cli

Incidentally, vue-cli predates create-react-app.

Great, that's actually useful information.

But you could have safely skipped the "first!" comment. Being first does not make you any more superior in the front-end world than it does in a youtube comment.

I couldn't help it, I'm sorry ;-). Although there is a point that Evan You has put a lot of effort into finessing the "developer experience" of using Vue. That includes vue-cli, "blessed" packages surrounding the main library (e.g. Vuex), being able to start using a script tag include if that's easiest, and clear documentation.

My "getting started" experience with React (which I use every day) was much more rocky. Admittedly this predates create-react-app.

first comment was useful
Recently I have created few tutorials on Vue.js. I comes from Angular JS 1 and 2 background. After few days of Vue.js, it seems very simple to begin with you.

If you are planning to build a side project, or dashboard kind of stuff so you can definitely give it a try. I feel it's like jquery :) little bit more concept to grasp.

Few video tutorials I am creating, you can watch and leave your comments:-

https://www.youtube.com/watch?v=Bv3_eTttgso

https://www.youtube.com/watch?v=WSXN-p7jVIk

https://www.youtube.com/watch?v=VKLUGU7YCFc

https://www.youtube.com/watch?v=FAa7Er_zQcg

https://www.youtube.com/watch?v=k5L2uikYkoc

What about Ember CLI? Predates both of them.
What are you on about? I cited two specific reasons: the excellent documentation and easy syntax which made the learning process go very smoothly. You seem to be doing exactly what you accused me of doing. Are you suggesting that React and Angular both have "good preconfigured defaults" and Vue does not?

Being overwhelmed by all the choices is a valid concern which is why I find it strange for you to be suggesting OP switches to another framework when he has already started with Vue.

I didn't mean to imply anything was wrong with Vue, I also was trying to keep it somewhat framework agnostic using react as an example (react is just what I'm most comfortable with currently, so it was easy to type up). The Vue question was more out of curiosity, and the fact that more popular frameworks are going to have more "help" available in most cases (learning is one area where it kind of is a popularity contest)

My comment probably should have been 2 separate comments.

"Don't add anything on top aside from what is needed for the bare minimum of your project you are learning with"

I believe not following this advice is the reason why so many (of us) are having difficulties in getting started. It very tempting to try to go for the "best-possible-stack" which includes too many neat libraries for solving some specific problems. This leads to endless troubleshooting which kills all the fun.

Get on the list at simplestepscode.com Program specializes in helping you past the overwhelming parts of it.
make it work, make it not crash, make it fast, make it pretty.
What is your goal? To build something specific, or get a certain job?

Why is jQuery alone not enough?

If you don't have strong native JavaScript skills. Improve it first.

And then, let's say you picked Vue.js. Googling MVVM and learn about the basic concept from your best backend language. (Reading as much as you can. Some good articles are written in other programming languages also.)

And then, starting to read source code as much as you can. I won't pick big projects. Just pick any sources you think you're interested and understand it.

After all, you will get the whole picture how the app should look like and why framework trying to do X & Y.

For source code reading. I will read all similar projects. For example, reading 10 counter apps in Vue.js. And then figure out the similar patterns and differences.
Learn by doing. It is hard to learn by just reading. You should have something in mind that you want to build. If you don't or can't come up with something, maybe you can build an internal tool your company may find helpful, or talk to friends to see if they need something you can build. Once you have an idea, then you have a goal.

Since you know jQuery already, that makes it easier to start. Start building it with jQuery first. Then look for a component or two for which states get a bit complicated. Replace the jQuery code in that/those component with Vue. You're already ahead since you've decided to use Vue. Many people are not even sure what JS framework library to use. Vue is an excellent choice, by the way.

This way, you have a reference to compare to. If you like Vue code better, you can think about if you want to replace all or most of the jQuery code. If not, then you can ask why. This may lead you to a deeper understanding of Vue.

For React true truecar/gluestick.

It separates the boilerplate so you just focus on the application code.

I'd recommend starting with mithriljs. The idea behind it is very similar to react for views. It's also vanilla JavaScript so you will probably have an easier job learning it.
I also think the OP should have a look at Mithril. When I was in his situation I also was overwhelmed by the tooling and boilerplate necessary for those other frameworks. But with Mithril I was able to start developing after skimming the docs for a few hours.
First, it's important to understand that most of these technologies have emerged and became popular because they solved real problems. In this regard, it may be difficult to "learn" them, if you never had those problems in the first place. If you feel comfortable learning jQuery, learn/use it enough to run into its weaknesses -- it won't take long. Then moving on will feel more natural and will feel less like effort and more like pain relief.

Second, I would be more focused on obtaining fundamental programming skills, like the ones you get taught in academic CS classes, and less concerned about [insert-your-shiny-"new"-js-paradigm-here]. The reality is, pillars of programming haven't changed drastically since 70ies, and if you're very comfortable with the fundamentals, everything else becomes less a matter of understanding, and more a matter of memorizing ("oh so this is how you do fundamental thing X in this particular framework").

Finally, as others have rightfully noted, focusing on one thing at a time makes learning way more efficient. It may seem counter-intuitive, but learning ten things consecutively will take way less time and energy than learning them in parallel.

Agreed! I know it can be so so overwhelming, but just hang in there. We have had these problems with the web from the very early days of JavaScript, but we have only reached an inflection point in the past 5-ish years where we have solved these problems. So these new and successful JavaScript abstractions/frameworks/layers/patterns are here to stay.

And yes, things like React, Redux, Flux, Backbone (if people still use that) etc etc etc are based in some solid grounding CS and technology architecture principles. Let the burden of engineering load not get mixed up with your ability to embrace and understand application of the fundamentals that underlie here.

I complained about something similar about a year ago, and the Facebook guys told me they felt the pain, but said that the investment would pay off, and it already has in the shortest amount of time. Just. hang. in. there.

>and became popular because they solved real problems

Maybe someone should write a blogpost about which real problems they solve per framework; not only is there a lot of overlap (very confusing for beginners: people want to use the best not have choices they cannot possibly make at that early point) and the problems they solve are often really not relevant for the problem at hand. A lot (most; considering most sites are wp or some other point and click cms) of people never run into the shortcomings of Jquery or PHP or Mysql etc.

A blogpost about connecting the fundamentals to modern frameworks and to specific parts of modern frameworks might be good too. For instance why the fundamentals are easy to understand and when applied to serverside they are still easy but when moving to frontend/js it often looks like a ball of poop.

A lot of that is because many of these things are not fundamentals anymore: 20000 slightly different build, pack, deploy etc tools are a good example why a lot of people I know struggle. Boilerplate du-jour is another one: the minute you pick one it is outdated and people moved on to some other repos it seems. Many tools within boilerplates seem overlapping or redundant to beginners: no one explains why and docs are often written for experts (or: read the source).

Another point is that unless you have a team with you, it is hard to run projects when so many changes to these modules and frameworks happen. If you are a coder working alone it is hard to keep all stacks up to date (security: less relevant for frontend a lot of they time but still) when they are so instable API wise.

We do experiments internally but for production we use the tools we know until things have stabilized. I need to know I can run security updates in 5-6 years , run the testsuite and be quite confident I do not have to spend a few weeks refactoring.

> A lot of people never run into the shortcomings of Jquery or PHP or Mysql etc

I'd rephrase that as "A lot of people don't identify and challenge the pain points of technologies they know and use for a while". Yes, that's a common pitfall and one every developer should be aware of. Question everything. In the example of jQuery -- "is there a way to bind my data to my view in a way that wouldn't require diligent manual updates in a highly stateful system that is now a major source of bugs in my existing design?" In the example of PHP -- "I keep having these bugs with comparing null, false, empty string, and zero, I wonder if there's a better way", or even "often I have a variable that I expect to be a dictionary, but it's null, and I have to check that everywhere, what if nullability could be ensured?", etc. But these questions won't occur without the solid fundamental base I've mentioned earlier. Because, guess what, the fundamental theory does include type theory, which does include nullability.

I don't think the fundamentals are easy at all. I think they're the hardest, but they're the knowledge that'll never become "obsolete", and will make everything else relatively effortless.

> 20000 slightly different build, pack, deploy etc tools are a good example why a lot of people I know struggle

Yeah too much choice is bad, but since most of them are incremental "improvements" of each other and obsolete each other, the real choice isn't that big. Honestly, with something like a JS build/pack system, I would just grab whatever Google gives me first and wouldn't switch unless it caused me a headache and there was an alternative that I knew fixes the problem. At the end of the day they're all just some command-line tool coupled with some JSON config file. It's not that hard to switch, most of us are not quite compiling the Unreal Engine.

Full disclaimer: I'm not a frontend engineer, and am only aware of frontend things on the surface plus the things I infer. I may be unaware of important details that dramatically change the situation.

The people building these front end frameworks aren't building products to last 5-6 months much less 5-6 years.
This is a very good point. All the JS frameworks I know of solve a real problem. Still most of them are just horrible unless you know exactly how to use them properly. Then again, UI programming tends to be ugly in any case (at least when you're stupid and do all the wrong things).

WRT jQuery, I'd even go further and say there's nothing wrong with jQuery perse [0]. It's just very hard to write modular, easy-to-read, reusable code with it. If you're smart enough and can come up with a good architecture, or if you need just a dozen of lines of JS, jQuery (or a lightweight reproduction of the API, eg. Zepto) might be the best choice.

So yeah, work on fundamental programming skills; learn to design good software architecture; and stay critical. You can work with most technologies, and you can mess up with all of them.

[0] I'm a Finn btw

It takes time (few months) and plenty of iterations to create the mental map and learn the proper patterns.

I suggest to create a simple app and iterate/refactor until you feel comfortable that you got it.

Boilerplates are good but they do take away a lot of important concepts that you should learn.

I'd start with react, redux, redux forms, react router, axios and webpack.

Also keep in mind that you're inadvertently learning ES6 as you dive in. So I'd start with that first.

Are you in the SF Bay Area by chance? We're putting on a 2-day React & Redux workshop where you build a full stack e-commerce app. We developed this workshop after hearing similar feedback from students frustrated with the lack of tutorials and workshops that teach you how to build a real app with React. It could help you to wrap your head around how to use React in a production application. More details at https://universe.com/realworldreact
I was in a similar boat and I recommend angular2 using the CLI. The build process is totally abstracted and the nice thing about angular is that you're never really going to be wondering what router do I use etc, because the framework is full featured. Plus it's fairly intuitive. It will be more complex than a jQuery powered Web page, but I think these SPA frameworks assume you're trying to make a more complex application, ie if you can build the same thing using jQuery, then just use jQuery -- unless it's an educational exercise.
Its like when ppl try sports, they buy all these tools, clothes, suplements and cool aid, and the same gear the pro uses. But you dont need any of that to grow some muscles and stay healthy. All you need is a text editor and you are good to go.
In this day and age I think you should use vanilla JS and not jQuery. But I don't think you need to use a MVC or "view manager" framework for simple projects. My personal standard is when I start writing a bunch of code to track state means I need something to do it for me. But if we're just talking about some basic AJAX forms that send to a server, these frameworks are overkill.