Implementing Frontend Frameworks

Standard

If you’d asked me a year ago I would have been a Stalwart wall of denial when it came to the usefulness of frontend frameworks. I’d have argued anything you wanted to do on the frontend of your web application could be achieved with HTML, CSS and  Javascript.

To a point, a very small point, I was right. You can do everything you want using basic frontend technologies, but that doesn’t mean you should.

Realizing I was already using other frontend technologies was a good first step to seeing there could be more to them than I thought. Bootstrap, Foundation, Uikit or Pure would all give a great starting point when making a website responsive, so why make my own? The same thing went for JQuery. It is possible to do it all in JavaScript, but (again) why reinvent the wheel?

These frameworks are tried and tested, they have online communities for support and an array of resolved issues on Stackoverflow. That kind of support doesn’t exist when ex-employee Frank wrote the whole thing from scratch.

“So let’s see what’s out there.” I thought to myself

Short answer, a lot. At the time I looked there were loads of quite popular CSS/JS  libraries and frameworks. So what to pick?

I’d suggest looking inward at where you work to see what they use if you’re a backend developer exploring this frontend world for the first time. You’ll get a ton of opportunities to practice and see examples.

If you already know what your company uses, or you want to help them expand into something new, what then? A shortened list of frameworks is a great starting point. I started with what’s popular. Popularity means more online sources for assistance, more tutorials, more businesses adopting it, and it’s probably stood the test of time for a reason.

JavaScript CSS
Angular Bootstrap
React Foundation
Ember Pure

A note on the CSS side, I’d recommend looking into a precompiler. They aren’t a huge thing to learn and the benefits can be nice. (Not many to pick from, but I’d say you can’t go wrong with SASS or LESS)

Now I’m not going to state exactly what you should use, that’s for everyone to decide for themselves. As we all have different use cases. But I will cover what benefits they bring as a whole.

A good framework will assist you to produce modular, reusable code. Depending on what you’re using to start with, it can cut down on the frequency of server calls, and the amount of data you send and receive with each.  Not only is the code reusable, it’s also reliable and robust. It’s been iterated over many times by, let’s face it, better developers than you or I.

There are a few cons, though, not everything in sunshine and rainbows. Some of these frameworks can be implemented badly, installing Angular won’t magically make your project amazing, and sometimes a bad implementation can undo all the benefits. It’s may also be the case you didn’t really need a framework.

This leads to learning. If you’re looking at these technologies for a home project then infinite time,  infinite research and zero risks are all yours. If you’re looking at taking one of these technologies into your company’s’ next project, you’re in a different boat. You have a deadline and you may not have time outside of work to learn. This can make it impossible to sway some decision makers that it’s the right idea. Especially when they consider the whole team’s time. It can be hard to see the weeks lost to learning will pay back months later down the line, and sacrificing time on current projects can be a tough pill to swallow.

This usually ends up in some “learn while doing” middle ground. And as a developer, you have to say no to this. Speaking from experience, this just leads to an unmaintainable mess. Production turned into a testing site for the how best to implement the new technology. Take the time, learn it on side projects or prototypes, plan carefully how to best implement it. Your future self will thank you.

So in summary, do your research. Don’t feel obligated to use one if you’re unsure of its benefits to your project. If implementing at work, push for time to prototype and learn. If implementing at home, pick what you think is cool and have a blast.

For my upcoming home project, I’ve decided to leave my comfort zone completely. I will be tackling a new technology (to me) in every layer of the application. After much research along with some work factors. I’ll be using Angular2, node.js, SASS, mongoDB/dynamoDB, and bootstrap3 (maybe bootstrap 4). I’ll be covering each of these in a deep dive over the next coming weeks as I get a more hands on feel for them.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s