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 at how languages questions evolved since 2008 in the below video.
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. We will discuss Python libraries in a different article.
You can check our Flask starter for free on GitHub.
I remember some years ago delivering my first freelance Backend project with no UI. Till then, I was just a 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 information from a Raspberry PI. But the way I was presenting the information was not relevant for nontechnical people. You need some kind of UI (nice or not) to do this.
But since that was not acceptable we got a V2 upgrade.
As you see this info can be actually read and it's easy to spot information. But is still an 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)!
And let's go out from the kitchen and understand exactly why people like full stack people:
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 a 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.
We’re gonna hit 1 million npm packages at the end of 2019. That's a big number of libraries to choose from.
And more than 320K JS Active repositories. 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.
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 the production environment.
Let’s begin by preparing the kitchen!
We need all kind of tools in the infrastructure below.
Serverless is a good alternative, but in many cases, we still need a server and more architecture.
Kubernetes
K8s It's 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 the app layer.
Backend should be easy
This is what they said...
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 adds to your application.
The advantage of 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 to express with Async and it also works.
Database and ORM
ORM(Object Relational Mapping) or ODM(for documents) 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 Decorator 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.
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.
This is the interest graph on Angular, React and Vue. Overall is a big growth 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.
You can think of Angular as a swiss-army knife that is capable of doing everything under the ng-cli world: create the 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.
Being complicated creates some curious statistics. Almost 35% of the users that used Angular said that will not use 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 use it after using 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.
Say hello to components! All you need is style, template, and script. Just like HTML. That makes Vue so simple.
The most interesting thing about Vue is that Asian market, especially China is very interested in 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.
The freelance full stack revenue can grow higher if you have the right full stack skills from above.
With 120K Linkedin jobs and based on trends I would go for a stack with React, Express, Bulma and Docker with K8S.
But if I need a startup project Vue.JS(11K Linkedin jobs) is a better choice because it has a 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 its main features are: 100% responsive
And the main advantage of Bulma is that it’s fully responsive. And it gets a 99-speed score while bootstrap 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.
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 ready coded libraries for free
Open source
I'm a freelance developer building open source full-stack examples. You could think of 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.
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 misleading: 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 planning.
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:
- Andrei Neagoie's articles
- UI is a full Stack presentation
- State of JS
- Octoverse GitHub statistics
- Linkedin Jobs
This article was first published on Appseed.us blog.
Top comments (0)