How to learn Full stack and increase your hourly rate

This is a simple way of choosing a stack and being able to deliver an entire project by a single developer. A real full-stack kick-ass.

First pick the language. And Javascript is clearly the easiest to learn a full stack thing. Take a look how languages questions evolved since 2008 in the bellow video.

Statistics on language questions since 2008

As you probably noticed Python is kind of taking a big interest. A lot of people already know that this is because of ML, Data features and also because of the syntax. Overall we can discuss about Python libraries in a different article.

You can check our Flask starter for free on github.

And I remember some years ago delivering my first freelance Backend project with no UI. Till then, I was just backend developer, working in bigger teams with all the positions very well defined in a big company. But this was my first freelance project and I had to learn a lot.

After 3 months of hard work, retrieved all the informations from a Raspberry PI. But the way I was presenting the information was not relevant for non technical people. You need some kind of UI (nice or not) to do this.

JSON object from a raspberry PI OS information

But since that was not acceptable we got a V2 upgrade.

Raw HTML 

As you see this info can be actually read and it's easy to spot information. But is still un ugly HTML. The advantage is that we can see what we need to learn in order to get a complete project.

And since this is important for everyone to have a nice overview, we will compare it with my favorite full-stack meal: The Burger (there are some good places to eat in both Iasi and Chisinau, but this is out of the scope for now)!

Full-stack burger!!!

And let's go out from the kitchen and understand exactly why people like full stack people:

Some of the tools to create a full-stack project

What do customers want?

To hire a freelancer that is capable of doing everything: basically delivering the full burger. Sorry, the full stack.

So they are capable of creating infrastructure and setting that up to be secure.

They create servers and spawn new servers when high load is required.

This full stack developer is also capable of creating and architecting databases.

After that they are capable to pick the right packages and libraries for our tools.

They can write backend. They also can do a little bit of design and frontend.

Sounds like a hard job! But today we have all the tools to do it and also the materials to learn it.

So let's get back to our target: Being a full-stack developer.

How Many Javascript libraries do you think are out there?

Try a simple guess, it won't hurt to test your estimation skills. Just set a number in your mind. Could be hundreds, thousands or millions?

Nowadays statistics are easy to find.

JS npm package count

We’re gonna hit 1 million npm packages at the end of 2019. That's a big number of libraries to choose from.

Active github repos

And more than 320K JS Active Active repos.
All this is behind the so called Javascript fatigue: too many libraries and frameworks to choose from.

And no! no! no! Javascript itself is not fatigued. We are getting tired when choosing from so many libraries.

Oh my god! The actual fatigued JS is me choosing from all of these.

Countless hours to research and read all reddit, medium and dev.to articles.

So many choices to make and just 24h to send my next project estimation.  

I want to be able to pick the right ones for my next project and also be able to use them in production environment.

Let’s begin by preparing the kitchen!

We need all kind of tools in the infrastructure bellow.

Serverless is a good alternative, but in many cases we still need a server and more architecture.

Kubernetes

K8s I’ts like a real kitchen. You even have the mechanism to lock things and keep them secure.

And is pretty much used right now in devops.

With Kubernetes you can inject configuration and secret variables and keep the infrastructure safe.

k8s is available on Google Cloud, Digital Ocean, Azure and AWS.

Docker

Let’s think at it as the barbecue or an oven and the tools we need in the kitchen to make our burgers.

Docker is a container definition - basically a VM that you define and POOF.

You have a database running. And POOF: You have a node js backend running.

Of course you have to write the Node js backend, but it’s easier than ever to deploy it on the server.

The database: either mongo or mysql. Will see later how to choose from.  And your Frontend also.

Bonus tip: use docker in interviews and coding challenges

You can even do this for small tests or coding challenges for hiring.

I’ve spent around one hour for setting up a docker container with Mongo, Redis and Node Js. It’s very simple until it gets complicated.

So for building a simple example with Node.JS and mongo I had to use a script (from Github) WAIT_HOSTS.

Basically waits for a database to start and then starts the node js container.

But...where is the Javascript?

Well, we kind of needed the kitchen which is the perfect environment to prepare everything. Now that we have infrastructure, databases and a way to start backend we can go to app layer.

Backend should be easy

This is what they said...

Npm trends on Express vs HapiJS vs Koa

On the npm trends it’s pretty easy to pick up a backend.

Express is pretty popular at 7M downloads per day. It has middleware that you can install, import and add to your application.

The advantage on going with the crowd is that you will find a lot of examples.

So you can go with the crowd or choose something else. Hapi.JS is used more in enterprise apps. It has a plugin system similar to middleware.

What will be the best decision?

Choose the framework on more than 1 parameter

I am working with HAPI with a big customer that has a bigger Rest API.

It’s easier to develop things on HAPI than on Express. If the api will be lighter and lower support is required we can go for Express. If you want to be more Async await pattern you can choose Koa.

Btw I used express with Async and it also works.

Database and ORM

ORM helps with easy management on the database.

Mongoose is the most downloaded but it works just with Mongo.

Sequelize is the second most downloaded but it works just with SQL databases.

Type ORM works with both but is typescript.

Bonus tip: use mongoose in interviews!

I used Mongoose when the customer was the most in a hurry. But after 6 or 12 months they wanted more cross tables analytics without writing new code. At the end SQL would have been better for more people.

If you are 100% sure that you will use SQL go for Sequelize. If you want to use both try TypeORM since it covers both and will ease migration without changing code.

TypeORM may have some slowness in coding when using it from JS so you will have to learn a bit of Decorators and Typescript.

What is a backend developer?

My friends say that is somebody scared of CSS.

Or somebody that hates it. In either way you should not let feelings to get between you and CSS.

But no worries, we have the right tools to handle the feelings.

This is Frontend!

Everybody in the JS world heard about React by this hour.

You know when holidays are coming when JS library download drops

React is around 5mil downloads. While Vue is closing down Angular at around 1 million daily downloads. Sounds like an easy choice to go for React.

Google trends for Angular, React and Vue

This is the interest graph on Angular, React and Vue. Overall is a big grow in interest on all 3 technologies.

Angular

Angular is the entire kitchen that gives you all the tools necessary for you to build the meal that is your web app. You can build more than a burger with it, and is not really recommended for small projects. You will also need at least one chef - experienced developer or architect to handle the project.

Your Angular Chef is here!

You can think at Angular as a swiss-army knife that is capable of doing everything under the ng-cli world: create project, create components, test them, build, develop.

If you have an outsourcing company that works with multiple customers is good to choose Angular. This can help you have the same tools for the entire team.

Angular is a framework, typescript recommended, you can build universal apps and large scale, feature rich apps. It uses MVC and is maintained by Google.

Retention rate is lowest from top frameworks.

Being complicated creates some curious statistics. Almost 35% of the users that used Angular said that will not used it again.

React

React is similar to a professional oven. You can cook the food in it but you will need more tools to prepare it. So basically you will need other external tools and libraries: babel for building, JSX, routers like redux.

The idea behind React was to have Everything in Javascript. And you can build SPA or mobile apps with it. It's easier than Angular and uses Virtual DOM with recommended JSX. Facebook is maintaining React.

The retention is much better on React world: only 7% of the users will not used it after used it. That's nice!

If you work in a single product company, that requires the ui to get updated often, React is the best to go. You will also need some senior dev experience.

Vue

Looking at the other two frameworks, you can easily compare Vue.JS with a microwave. It's easier to use, small learning curves.

Vue is the microwave that allows you to get up and running really fast and make your cooking life efficient and easy.

You just need the burger ingredients and it will be just fast and cooked. But remember to cook all the things in the right order and separately.

If I am a startup with a young developer team and a strict deadline, I like Vue.js.

The popularity over time is increasing and the retention rate Vue.js is very high, under 1% of people would not use it again.

A Vue.js component

Say hello to components! All you need is: style, template and script. Just like HTML. That makes Vue so simple.

Vue JS interest

The most interesting thing about Vue is that Asian market, especially China is very interested on it.

A real reason could be that Angular and React are dependent to US giants like Google and Facebook. Vue.js is the only real open source maintained between these 3 top Frontend libraries. All of them are licensed open source.

Salary differences

Some salary insights based on frontend tech. Looks like React is on top of it also on the higher margin.

Developer salaries for stacks

The freelance full stack revenue can grow higher if you have the right full stack skills from above.

Andrei's cup of winner for React

With 120K Linkedin jobs and based on trends I would go for a stack with React, Express, Bulma and Docker with K8S.

But if you I need a startup project Vue.JS(11K Linkedin jobs) is a better choice because it has smaller learning curve.

If I want a career in enterprise and outsourcing world I would pick Angular(96K Linkedin jobs) to be able to work in bigger teams.

And how about my CSS emotions?

You can pick any of

  • Bootstrap, 68kb/12kb size, 49 elements,
  • Bulma, 73kb/10kb size, 53 elements
  • Foundation, 30kb/7kb, 56 elements
  • UIKit, 33kb/6kb, 51 elements

From all these I would choose BULMA but you have a wide variety to choose if you want to start fast with a CSS framework.The main advantage of using Bulma is that its box model is fully based on Flexbox. (Yes! no more CSS floats and percentages!) Bulma claims it's main features are: 100% responsive

Bulma example

And the main advantage of Bulma is that it’s fully responsive. And it gets a 99 speed score while boostrap gets a 90. This feature beats downloads statistics.

Do you remember the plain JSON and HTML we had at the beginning of the article?

It's a piece of cake to attach one of the frameworks and get a better representation.

Bulma table example

Every project is a full stack

Right now every project requires at least a small amount of skills.

Remember that it's easy to choose a library or a framework by doing some simple things:

  • Check google trends
  • Check npm trends
  • Github page of the project for opened issues, solved issues, how fast are solved
  • Follow the creators of the libraries on twitter and find out when they release new things
  • Try already coded libraries for free

Open source

Start projects from github page or appseed.us website.

I'm a freelance developer building open source full stack examples. You could think at it as recipes for burgers, but not exactly that. Basically scaffolding in React, Vue, Angular, Node and Flask. You can download and

The story: pottery class

When I want to learn something I always think about this story.

In a pottery class the teacher split the class in two.

So the teacher told to the right side students that whoever creates the most kilograms of pottery will win.

Learning new things

And then the teacher turned to the left side class and told them that the one that creates the most beautiful ceramic will win the class.

After one week the winner was chosen.

From which side of the class do you think he was?

The ones that build quantity or the ones that were aiming for quality?

The answer is actually pretty missleading: the ones that built for quantity created the most beautiful pottery.

Why that?

The students from the left side procrastinated a lot and created just one single piece of ceramics per day, spending more time on planing.

The students from the right side, quantity one, were more focused on doing. So at the end of the day they were creating 5-6 pieces. They failed a lot and they also learned a lot. At the end of the week they had an experience of 30 ceramics build, so plenty to choose from. The winner was the one that practiced the most.

So remember each time you want to learn more to build as much as you can. And at the end of 2019 you will be the 10x better than the ones that just procrastinate.

The end

All the above content was on stage at Codecamp Chisinau, Frontend Track, 11th May 2019. The public was amazing and I got positive feedback to improve the content.

Got some inspiration from these wonderful fellows:

  1. Andrei Neagoie's articles
  2. UI is a full Stack presention
  3. State of JS
  4. Octoverse github statistics
  5. Linkedin Jobs
Show Comments

Get the latest posts delivered right to your inbox.