Want a job in web development? Learn a framework.

WRITTEN BY GARETH DUNNE @DUNNEDEV

When browsing information about web development careers you might stumble upon junior or entry level developers asking about the correct way to get hired. Very frequently there will be advice given along the lines of:

  • Learn pure JavaScript.
  • Know the ins and outs of Vanilla JS.
  • Do not learn a framework until you know the intricacies of JavaScript.

And while I think all this advice is coming from a good place, its not practical.

This is somewhat of a controversial opinion when looking at online forums such a reddit webdev or reddit JavaScript. But lets take a step back and look at the facts here.

You are a junior developer with basic knowledge of JavaScript, you look at job postings online, what do you see?

Well, nearly every frontend position is looking for you to work with either Angular, React or Vue and no position is seeking someone proficient in vanilla JavaScript.

So if you were being practical, you should jump into one of these frameworks and learn how to use your basic JavaScript knowledge within the constraints of that technology. Doing this alone could increase your employability significantly.


Not Encouraged

But why is this considered a bad idea by the masses? Well it conflicts with the idea of what a good programmer should be about. The idea of what a web developer should know in order to give themselves the best chance possible to use deep knowledge that allows to debug and problem solve in the most efficient way possible.

But again, as much as I agree with this, its not practical for someone who has just entered the industry, is urgently seeking a junior position and who has possibly switched his/her career halfway through. This also applies someone who has just finished a bootcamp

Experts in the web development community have every right to demand high standards of programming, this is a highly skilled field that people devote massive amounts of time to and something they are truly passionate about it. But people entering the industry don’t have to brush up their JavaScript to the degree expected by most purists.

Why would someone in this position spend all this extra time going in depth in vanilla JavaScript when they can learn how a framework works and be able to code inside the context of this framework and land themselves a job as soon as possible.

You have to remember this isn’t someone who wants to adhere to the best coding practises currently available, at least, not yet in their career.

The most likely situation is that this person will come to terms with some of the key elements of JavaScript while working inside their chosen framework. From this point, he/she can then become proficient in the more in depth parts of the language.

Now let me stress, this is not ideal for the industry nor does it strengthen the quality of developers available to the workforce. But to deny that this isn’t the quickest surefire way to land a frontend entry position is foolish.

Abstraction

We can tie this back down to one of the most essential programming concepts, abstraction.

The latest of these in demand frontend frameworks give us a layer of abstraction to work within. This layer of abstraction is supposed to provide us with a new environment to work in, while hiding the previous complications behind the scenes.

This is exactly why a junior developer can begin learning inside the constraints of this framework, and improve their JavaScript while doing so.

Will they become an expert in JavaScript this way? No of course not, and this is the flipside of working in a abstracted environment. It hides the complexity that you could otherwise learn.

Another aspect that has to be considered  is how the latest frameworks are integrated with the latest in JavaScript practises.

Frameworks like Angular, React and Vue have standardized the use of the latest from ES6. This further adds to the argument, that you can easily jump into these frameworks and learn current and key fundamentals of Javascript.

Features like ES6 arrow functions:

Ternary operators

State Management in React

Anyone who uses these features will inadvertently broaden their knowledge of JavaScript and become more attractive to employers.

Recruiters

We also can’t ignore the dominance of external recruiters in the web development industry. I know from personal experience, as I’m sure many others  do, that these recruiters are hounding individuals with specific criteria ie, which framework do you know?

And while normally I’m the one complaining about the lack technical knowledge that a recruiter has, this is something that someone at entry level can take advantage of and be fast tracked to an interview.

Learn a framework, build a few small projects and you’ve already launched yourself into better position than you rightfully should be. You have to remember that the application of a language will be almost completely be inside the boundaries of the framework. Everyone will tell you that you can’t learn JavaScript this way but disregard these notions as if you are in the start of your career its only logical that you will learn as you go along.

A lot of the community will disregard this idea and I myself can see how it initially devalues the quality of junior developers but I like to be realistic and practical about these things.

Simply put, specialising in what people are looking for fast tracks you to a job and at the end of the day, landing that initial job can be the first step in developing your technical ability.

Technical prowess will come later, launching your career is paramount.

How to use Firebase to host your Web Application using a custom domain

WRITTEN BY GARETH DUNNE @DUNNEDEV

In comparison to a few years ago, there are a wide variety of ways to deploy a web application. Many will vouch for Heroku for prototyping and I tend to agree. Its a great service to deploy an app free of charge with the option to pay for premium features to scale up.

Another great option would be Github Pages which allows you to host a website or web application by deploying one of your repositories. It gives you a url to view your repository such as :
https://username.github.io.

Again, this is another great option for getting you application live.

The best option that I have been using at the moment is Firebase hosting. Its similar to the other options but allows you to stack extra services on top such as cloud functions. Heroku, of course, also lets you run similar server side functions and its backend and is a lot more flexible.

And although I might come back to compare all these providers the main thing to take away from these services for the purposes of this post, is that Firebase automatically provides SSL encryption. This makes it very easy to link it to a custom domain purchase from domain name sites. In my case, it was NameSilo, who I find dirt cheap without the shadiness of other low cost domain providers. Its reliable with a great albeit uninspired interface.

This is all taken from an experience I had when deploying my random beer finder web application.

This is an application that uses some nice animations from a frontend Coursetro tutorial in combination with RxJS Observables and requests to BreweryDB API.

Be sure to check it out here.

So lets deploy our web application and apply our custom purchased domain.

Setup Firebase

Full instructions from the Firebase documentation are listed here, however I’m just going to cover installing it via NPM.
Run the following command in your console window to install firebase tools globally:

Now, in the directory of your desired project, you now want to initiate hosting for Firebase:

From here you can dictate how you want you Firebase application to be configured.

Say yes to public directory and configuring as a single page app:

You should then create your project in the Firebase console here.

You project has now been initialized with Firebase. Once you are ready to deploy move onto this next section.

Deploying

When ready to deploy your Angular application to Firebase we want to build a production version of it.

Run the command:

You application will be built and the output is usually in the dist folder. You can now do a full firebase deploy with the command:

Or if you just want to deploy the hosting services

When finished your console will indicate what url your deployed application is being hosted.

In my case it was something along the lines of :

https://random-beer.firebaseapp.com

Custom Domain

So the final step in this process is to verify your purchased domain to Firebase. Firebase will also take in any other subdomains you might have and redirect it to your deployed Firebase app url.

We will need to navigate to the Firebase hosting console.

You will have to change the DNS records in order to indicate to Google that you own the domain name. We want to create a TXT record in our domain backend. This is made relatively simple in NameSilo and most other domain hosting interfaces will be quite similar.

Log in and navigate to the domain manager:

Select your desired domain and click the DNS Records option.

From here we want to add two TXT record with details from our Firebase console.

After about an hour Google was able to recognize these new records and establish that I was the owner of the domain. Google will then ask you add two A records with custom IP addresses that they will give you. From here we will do the exact same thing on your domain provider except adding two A records instead using the details from our Firebase console.

SEO

As you may be aware, a typically bundled and deployed JavaScript web app using a modern web frontend framework is not crawlable or index able by most search engine bots.  To solve, it can be a complicated beast, especially for Angular applications.

The most common approach in order to make your Angular app SEO friendly is to allow your server to generate your HTML markup dynamically. In some cases, this can be easier said than done and was mostly done with Angular Universal.

However, I found it needlessly cumbersome and I think I have found a great alternative specifically for Firebase hosted applications. The folks at Angular Firebase have come up with a fantastic tutorial for this using Rendertron. An external service that allows your site to serve dynamic SEO friendly markup only to search bots while serving your users the standard JavaScript version.

I really think this is the future of SEO for web application so I highly reccomend you watch this video.

Conclusion

Its proven relatively pain free process to transfer a domain name over to our hosted web application. This seamless process is one of the reasons I’m looking at Firebase Hosting more longer term. Apart from just hosting, there are many other added features such as cloud functions which are particulary useful for deploying server side code alongside your application. I hope to cover that soon.