Hey you. So you’re a polyglot unicorn rockstar fullstack dev? Awesome. So you think you can Frontend? Think again. The thing about many fullstack devs are that they think they’re good at everything but in all honesty, taking a more general development role makes it hard for you to be specialised in any. I took a frontend job recently and even when i expect to have holes in my knowledge, it still caught me by surprise how much really i needed to get used to. Here are some of the technologies that are being used i the current environment right now.
HTML & CSS (including the new stuff like Flex and Grid)
You cant expect to do front end without HTML and CSS. These are still the basic building blocks of pages and some apps. Instead of usually using bootstrap for everything i find that a lot of frontend developers will write their own CSS in the form of SASS/SCSS. And theres new stuff out nowadays like flex and grid layout that you’d do well to study up on too. You can obviously google these but ill share the resources i like.
Interneting is hard: https://internetingishard.com/
CSS game: http://flukeout.github.io/
Flex game: http://flexboxfroggy.com/
Grid game: http://cssgridgarden.com/
HTML/CSS – Atomic Design Methodology
When structuring your frontend elements, do you just manually build all the forms in html blindly? The better solution is to break them into components, then use those components to build more complicated components. This would ensure a more uniformed design of the page.Not really a technology stack but a methodology, in Atomic Design by this guy called Brad Frost is a good example of it. They separate these a atoms < molecules <organisms < templates < pages. Check it out here http://bradfrost.com/blog/post/atomic-web-design/
Javascript (ES6)
Ahh the age old Javascript. I was expecting people to use Coffeescript or Typescript but apparently plain old Javascript is still widely used. The new version called ES6 solves a bunch of the issues in ES5 like callback hells with promises and they also implemented arrows like java8 lambdas. Other new stuff is there as well but im still figuring them out as I go.
ES6 features: https://github.com/lukehoban/es6features
JS- AngularJS and/or React
The JS framework wars are still going strong with AngularJS from Google and ReactJS from Facebook still being in the top 2 of the best frameworks. I’m not new to Angular1.5 so I’ve been having fun with the new Components feature we’ve been using on a project. AngularJS is great once you get used to it with a bunch of cool things like the data binding, directives and watchers. Find a tutorial and try it out. Or just head straight to Angular 2, i don’t care.
React is another good framework but I haven’t spent more than a couple hours trying it out. So they have this new concept using JSX there they put in HTML, CSS and JS into one file. Makes you wanna gouge your eyes out at first but it makes sense when you think about it to have that one file as one component and not worry about integration much. Its also usually coupled with this state manager thingy called Redux thats supposedly magic.
Alternatives: VueJs?
AngularJS: https://angularjs.org/
ReactJS: https://facebook.github.io/react/
JS, Mobile- React Native and Expo
Built on top of React, React Native provides components to build native Android/iOS using Javascript using the ReactJS methodology. Its pretty cool and has good documentation and allows web developers to build mobile apps without having to learn a new language like Objective-C, Swift or Java. In addition, theres also this thing called Expo that builds on top of React Native that allows some more functionalities and components and being able to build without having to rewrite the same page for Android and iOS separately. It also allows you to dev and test whatever you’re building on your mobile phone if you download the app. Just build your app in the cli and It’ll generate the QR code right in the terminal! Pretty cool thing that I’m currently looking into.
Alternatives: Ionic Framework
React Native: https://facebook.github.io/react-native/
Expo: https://expo.io/
Best way to start projects: https://facebook.github.io/react-native/blog/2017/03/13/introducing-create-react-native-app.html
Recent posts