Ask HN: Overwhelmed with learning front-end, how do I proceed?
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 ] threadthen build something slightly larger
Let me know what you think! I plan to evolve it by building a codeacademy style interface for learning these projects...
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.
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.
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.
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
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...
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:
is basically pseudocode. I love it.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!
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!
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.
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 helped me a little: https://medium.freecodecamp.com/a-study-plan-to-cure-javascr...
And have some laughs: https://hackernoon.com/how-it-feels-to-learn-javascript-in-2...
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.
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({
});ReactDOM.render(
);1. Create your custom component:
2. Register it: 3. Display it: That's anything but hard. Here: https://jsfiddle.net/v5s77r2x/.*Updated with simpler code and JSfiddle example
See https://babeljs.io/blog/2015/06/07/react-on-es6-plus
:-) just sayin;-)
https://github.com/vuejs/vue-cli
Incidentally, vue-cli predates create-react-app.
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.
My "getting started" experience with React (which I use every day) was much more rocky. Admittedly this predates create-react-app.
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
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.
My comment probably should have been 2 separate comments.
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.
Do you remember the google front page in '97? ~ https://duckduckgo.com/?q=google+1997&iax=1&ia=images Concentrate on the real problem, design (this is where you should start) a simple interface. Iterate as @itamarst suggests ~ https://news.ycombinator.com/item?id=12882850
Why is jQuery alone not enough?
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.
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.
It separates the boilerplate so you just focus on the application code.
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.
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.
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.
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.
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
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.