Front End Engineering
What’s the best way to learn really good front end engineering? Specifically what frameworks / languages are useful, design patterns, and some projects to get hands dirty?
my motivation for learning front end is to build products that people would actually use :)
Discussion
(9 comments)- 72 months agoTech Lead/Manager at Meta, Pinterest, Kosei
When learning frontend, the primary failure mode is hopping around and surveying all the shiny new technologies.
I like Charlie's suggestion to commit to React. I would recommend not adding in too many other libraries like Redux or Flux. Be ok with doing things the "dumb" way since it'll help you understand the pain point and why these tools are needed.
Build a side project as soon as you can (even before you think you're ready): [Masterclass] How To Build And Grow Tech Products To 500k+ Users For Free
- 62 months agoEng @ Taro
React is the most popular framework used across most tech companies, so I would definitely invest time in learning it. I would start by going through the official React docs (https://react.dev/). If you are just getting into front end engineering, I would try to get the most basic webapp working before trying to overcomplicate things by looking into different libraries and design patterns. You can get pretty far by just using vanilla React.
As far as project ideas, I would try to brainstorm 5 things that you think would be interesting to build. And pick the idea that is the most interesting. This will be a very personal thing because someone else might have an idea but your energy/motivation to work on it may be low. Your goal is to milk all of the momentum and energy you have right now to ship a webapp.
- 22 months agoSoftware Engineer [OP]Microsoft
Thanks for the suggestions! Are there any list of suggestions you recommend building first? I am having a bit of trouble coming up with the ideas. In addition to that, is there any good vanilla UI frameworks (or even fancier ones) that you would recommend using? Is it worth spending time learning a bit of design principles and if so what are some good resources.
I appreciate the very helpful response :)
- 22 months agoEng @ Taro
You could try to build a flashcard or notes app. Is there something that you keep track of each day in a note or spreadsheet that could be its own app? This would be a CRUD app that should exercise a lot of the learning muscle.
For UI library, you can import components from Chakra (https://v2.chakra-ui.com/) to use in your React app. If you do this, you won't need to worry about building out individual components, so you can focus on the higher level React state management and data flow concepts.
You might want to just try to wing it to see how disorganized the code can get before you need to apply some order. Creating folders for components, lib, constants, and hooks can get you pretty far.
- 02 months agoSoftware Engineer [OP]Microsoft
Sounds great and thanks again for the very actionable advice there!
- 5
2 months agoTech Lead @ Robinhood, Meta, Course HeroFront-end is great as the feedback cycle is short. You can immediately see and feel the quality of the experience you've built. On top of that, it's easy to share with family and friends.
Leverage that superpower by biasing towards shipping. Minimize tutorial time and just start hacking stuff together (don't worry at all about code quality, prioritize product quality instead).
When it comes to your first project, a note-taking or TODO app are the best in a vacuum. They will exercise the full CRUD cycle, and you can make those apps very powerful (look at Notion).
The much better option though is to come up with an idea organically and build that out. Check this out to learn more about how to do that: "Finding a mobile app idea - How to do it?"
We have a masterclass about coming up with good side project ideas as well: [Masterclass] How To Come Up With 100k+ Users App Ideas You Can Build For Free
Lastly, here's a much more in-depth roadmap (my recommendation though is to start building something now and then looking at the roadmap later as it's better for your learning to organically "bump into" the concepts): https://github.com/Gear61/Tech-Career-Growth-Learning-Resources-And-Roadmaps?tab=readme-ov-file#-web
- 52 months agoMid-Level Software Engineer [SDE 2] at Amazon
Not sure if this fit the posting guideline but I would like to recommend https://www.greatfrontend.com/projects for trying a challenging FrontEnd project and practice the latest technology as a side project.
- 02 months agoTech Lead/Manager at Meta, Pinterest, Kosei
Yes nice suggestion! I've talked to the founder and actually included them in Taro Perks
- 02 months agoSoftware Engineer [OP]Microsoft
Amazing suggestion! Thanks so much :)
