Gone are the days when frontend developers just needed to know HTML, CSS and DOM manipulation. It seems no one writes vanilla CSS these days, which has been succeeded by pre and post processors such as Sass (with Compass) and PostCSS. ES6 has brought the ease and intuitiveness of jQuery back to regular ol’ JavaScript – which is now one of the most popular programming languages in the world.
To be a frontend developer in this day and age, JavaScript, jQuery, JSON and AJAX are requirements, and knowledge of libraries and frameworks such as Ionic, Angular, Ember, React and TypeScript are frequently demanded skills.
As a frontend developer, you’re also required to know about version control systems such as Git, and experience with API’s aren’t out of the question either.
It seems everyday a new JS library comes out, so you should also have a strong desire to learn. Frontend is evolving at a rapid pace and is frequently creeping into other development areas in mobile and backend, and you need to keep up with this.
Sounds like you? Great you’ve got the job.
Without further ado, I’d like to tell you about some of our favorite tools and libraries that are already huge and guaranteed to grow and evolve even more in 2018.
Ionic 2
What Is It and Who Uses It?
Ionic 2 is a framework for web developers to create cross-platform mobile and web applications.
Pros
- Build native and web optimized apps
- High performance
- Ready made components
- Free and open source
- Good community support including on Slack and StackOverflow
- One code base for all platforms
- High availability of plugins
- Push notifications built in
- Written in Angular
- Object Oriented Programming thanks to TypeScript
- Ionic Pro
- Live deploys (no need to submit changes through app stores)
- Native builds
- Crash reports
Cons
- Supporting multiple platforms with a single codebase can require specific Cordova plugins
- While good, it’s performance isn’t as good as native apps written in Obj-C or Java
- Not ideal for highly graphical apps, e.g. games or 3D modelling
- Constrained to use Angular and TypeScript
Who Should Learn It?
Web developers looking to expand into the world of mobile.
Angular
What Is It and Who Uses It?
Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop. It is used by both frontend and backend engineers.
Pros
- Built by Google – well maintained
- Build modern, progressive web apps
- Can be used to build cross-platform hybrid mobile apps using Ionic or NativeScript
- Create desktop level applications for Mac, Linux and Linux using the same Angular methods as you would do for the web.
- Supports TypeScript – a superset of JavaScript (see below for it’s own pros)
Cons
- TypeScript (see below for it’s own cons)
Who Should Learn It?
Frontend developers looking to expand their skill range into full data driven applications.
TypeScript
What Is It and Who Uses It?
TypeScript is a free and open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript, and adds optional static typing to the language. It is used by frontend engineers, and is more familiar to software engineers with a background in C/C++.
Pros
- Statically typed
- Support for ECMAScript 2015
- It’s based on object oriented programming
- Compiles into regular JavaScript
- Adds much needed features such as modules and classes to JavaScript
- Support with many IDE’s (code editors)
- Typos/mistakes caught when being compiled
Cons
- Can be cumbersome to use type annotations everywhere in your code
- Complex and hard to get used to if you’re not familiar with statically typed languages or object oriented programming
- Needs to be compiled before it can be ran in the browser
Who Should Learn It?
Frontend engineers looking to make the most of JavaScript and educate themselves in OOP.
Visual Studio Code
What Is It and Who Uses It?
Visual Studio Code is a free and open source code editor for mac, Windows and Linux. It’s developed by Microsoft and can be used for any coding language.
Pros
- Free, open-source and multi-platform
- Useful hints and auto-completion when writing code
- Includes debugging tools for Node.js, TypeScript and JavaScript
- Strong Integration with TypeScript (VSC is actually written in TypeScript itself)
- Integrated Git control
Cons
- Slow launch time
- Slow search within projects
Who Should Learn It?
Developers looking for solid, free IDE.
Charles
What Is It and Who Uses It?
Charles is a HTTP proxy/monitor/reverse proxy that enables developers to view all traffic between their machine and the internet. This includes http requests, responses and headers. As a developer it’s difficult to see what’s being sent and received between your web browser and the internet, which can make tracking down issues and bugs a pain. Charles makes it easy to see what’s happening enabling you to address issues faster.
Pros
- Traffic analysis – see what’s coming in and going out
- SSL proxying – view https request and responses in plain text
- Can throttle bandwidth to simulate slower internet connections
- Ajax debugging – view XML and JSON requests
- Edit and repeat requests
Cons
- Difficult to configure if you don’t know what you’re doing
- Not much info available elsewhere on the web
Who Should Learn It?
Any developer who is looking to regain control over their website’s or app’s communication with the internet.
Email Tools
Believe it or not, email marketing is still a very viable method in this day an age, and while modern email clients have improved, they still lack a lot of common HTML and CSS features. These tools might just help ease your pain when developing email templates.
Juice
What Is It and Who Uses It?
Juice is a CSS inlining tool, perfect for emails (which can’t reference a separate CSS file.) It can be used by frontend developers who write email templates and campaigns.
Pros
- Makes email templating and maintenance easier by writing CSS (even Less or Sass) separately
- Offers tags to skip inline of certain stylesheets or even
- Can be used in a variety of ways including the CLI
Cons
- I can’t really think of any, it’s a brilliant tool for developers who still like a hands-on approach to email.
Who Should Learn It?
Frontend developers and marketers with some development knowledge.
MJML
What Is It and Who Uses It?
MJML is an email templating tool that makes it extremely easy to create responsive, well-coded emails.
Pros
- It’s free and open-source
- Write less code by using MJML’s tags
- Compatible with a wide range of email clients, including Outlook
- Component based – offers reusable and extendable components to build emails with
- Extremely simple markup
- Great documentation
Cons
- Predefined templates are a little plain
- That’s pretty much it, any tool helping with email creation is a good thing
Who Should Learn It?
Any web developer who finds themselves needing to create an email campaign.
Conclusion
We’ve outlined a few great tools you can learn and use to get your frontend game up in 2018. Some are old favourites and others are new on block, who are continually evolving to push frontend development to new levels and in new directions.
Looking into the future, we believe that JavaScript will continue to modernise and become a solid language for cross platforms builds – making the line between native builds and cross-platform tools grow thinner.
CSS’s evolution will natively add what it’s current pre and post processors can offer, and while still styling the web, the concept of a page itself will slowly fade as we start building complexing content serving systems.
Have any other suggestions? Let’s us know.
Thank You!
Get Notified On New Articles
You can unsubscribe any time
if you change your mind.
By submitting your information
you agree to our Privacy Policy.
