This is the thirteenth article on the website.
How to become a Full Stack Developer in 2018: For Dummies.
You may have heard the term “Full Stack Developer” quite a times. But what exactly is a full stack developer? How to become a full stack developer?
A full stack developer is someone who can develop all the stacks of web applications. There are two (major) stacks of web applications: Frontend and Backend.
I am assuming you have zero experience in web development.
Learning Basic Frontend Development
The first step in full stack web development is learning HTML5, CSS3 and JavaScript. HTML5 is a markup language that is used to markup web pages. CSS3 is a styling language that is used to style HTML5. Without CSS3, the web page would look real bad. HTML5 and CSS3 are not programming languages. Now time to learn a programming language. With HTML5 and CSS3 you would want to learn JavaScript, The language of the Internet. The language that powers the browser. JavaScript is used to bring interactivity in web pages. Try to disable JavaScript in your browser and then open some websites. You will notice that some websites won’t load, or preloader keeps loading forever and buttons on some websites won’t work. JavaScript is responsible to make web an interactive place. Now let’s talk about Document Object Model . When a web page is loaded, browser creates a Document Object Model (DOM) of the page. You could say it is a programming interface for HTML. In DOM, HTML elements are defined as objects. With the help of DOM, JavaScript gets access to all the elements, properties and events of HTML page. And you can manipulate those to create dynamic webpage. In other words, you can change HTML and CSS of the page using JavaScript and DOM.
After learning JavaScript and DOM, you should learn jQuery. It is a JavaScript library. It makes it easy to manipulate HTML and CSS with JavaScript. After learning this much you are good enough to build an interactive webpage. But let’s make this work even easier. Learn Bootstrap. It is another open-source web front-end component library. In simple words, some developers thought to make some components such as beautiful navigation bar, buttons, forms, modals etc., so it would be painless for beginners to make good looking user interfaces. So they wrote some CSS classes to beautify these elements and compiled those classes in one CSS file. All you have to do is add 3–4 lines in your HTML to include those CSS and JS files of Bootstrap, and you get access to all those classes. Now you can use those classes in your HTML elements and you will get beautiful UI effortlessly.
HTML5 done. CSS3 done. JavaScript done. jQuery done. Bootstrap done. Now comes AJAX, stands for Asynchronous JavaScript And XML. But before learning AJAX you should know how exactly a web application or website works.
There are two types of websites: Static and Dynamic.
Static Websites are simple HTML5, CSS3 and JavaScript. They have no backend or database. A static website doesn’t take any data from a server/backend.
Dynamic Websites have backend. Web pages are generated in real time in a dynamic website.
AJAX is a bliss to web developers. It allows web pages to communicate with web server to send or fetch data asynchronously. Everything happens under the hood, in background. You use AJAX to get the data from server and use JavaScript to parse the data and use JavaScript again to manipulate current page’s HTML. So you can change content of page even without reloading the page. Real-life example of this is sports news websites. They use AJAX to update scores without reloading the page.
Okay. So I think this is enough for a beginner Frontend Web Developer.
What? Just beginner? Are you kidding?
Oh come’on man, it’s 2018. We are not in 2011. In 2018, we have really awesome front-end frameworks and libraries to build awesome User Interfaces.
Learning Advanced Frontend Development
In the era of modern web, it is important to build good looking interactive User Interface. Using AJAX we can do that. But there are frameworks and libraries that make this easier and more efficient. I am talking about Single Page Application Frameworks/Library Angular, React, and Vue. There are many more such as Ember and Backbone but these three are the leaders of SPA development. Okay, so now the question is:
What the heck is Single Page Application?
Single page application stands for a web application, that only loads a single HTML page and updates the page dynamically without reloading it. But does that mean an SPA can have only one page? Well, the answer is Yes and No. Yes, because SPAs have one HTML page. No, because you can make as many pages as you want using app level routing. In simple words this means you can think of a HTML page that has multiple sections and only one section is visible at a route.
Which framework or library to choose: Angular or React or Vue.
It’s up to you. Angular is a framework that provides you routing, state management, UI kit etc. out of the box. It’s the reason why it’s a popular choice for enterprises. It’s backed by Google. On the other hand React is a library to make interactive UI painlessly. It’s backed by Facebook. Being just a UI library, React doesn’t provide state management, routing etc out of the box. Instead, React has an amazing community. Redux was created by a Facebook engineer. It is a state management library that can be used with React and React-Redux combo is so powerful. Other than Redux, there are other libraries like flux and mobX for state management. And there are many routing libraries available for routing but react-router-dom is a popular one. React is faster than Angular in rendering updates as React uses Virtual DOM and it efficiently updates only changed components. I love React and the best part of React is JSX. JSX stands for JavaScript Extension. JSX is basically 80% HTML DOM components. The third most popular JS framework is Vue.js. People say it’s best of both React and Angular. Vue.js uses Virtual DOM and it has routing, state management etc. out of the box. React is the most popular choice of Developers (including me) right now but Vue.js is rising too. You can choose to learn both React or Vue.js or all three if you have plenty of time.
Learning Basic Backend Development
If you want to build a complete web app, you need to write the server side too. There are many options for which language you wan to choose. So here are the languages options:
Python: Sweet and easiest of all to learn.
Node.js: JavaScript that runs on server-side too. (You would want to choose this if you already have good knowledge of JS or frontend development).
Go: Simple, fast, efficient. Built by Google.
Java: Fast but have to write too much code.
Ruby: Again simple, easy and productive.
PHP or .NET(C#): Both of the languages used to dominate the backend industry once. But PHP is losing the edge.
Erlang, elixir are other languages that you can also learn for backend.
Choose a Framework according to a language: After choosing a language and learning it, you can choose a framework to build the backend because frameworks make it a lot easy to build things.
If you choose Python: Flask and Django are two great options. Flask is easy and minimalist. It’s easy to make backend API with it. On the other hand Django is a MVC (model-view-controller) framework that provides tons of the features out of the box.
If you choose Node.js: Express, Sails and Hapi are some of the famous frameworks that you can use. With Node.js, people generally use MongoDB which is a NoSQL database. MongoDB has great API that makes the development really easy.
If you choose Ruby: Ruby on Rails and Sinatra are two great options. Ruby on Rails once ruled the era of web development. Twitter, Airbnb and many other great apps are built with Ruby on Rails.
Spring for Java, Laravel for PHP. Pheonix for Exilir and the list goes on…
In addition to these frameworks you should also have knowledge about databases. MongoDB, MySQL and DynamoDB are some of the popular databases that you should learn about.
Making Multi-platform Apps
Okay so I wanna ask you one question here.
How many minimum programming language(s) is(are) required to build a Web, Android, iOS, Windows, Mac OS X, and Linux app?
Answer is: ONE.
That language is JavaScript. With JavaScript, you can build app on any platform. Thanks to the vibrant community of JavaScript, today there are so many options to build multi-platform apps in JS.
If you had chosen React above in advanced frontend section, you can use React Native to build cross-platform apps that run on Android and iOS. Other options are Ionic and Cordova. Ionic uses Angular to build mobile apps. Apps built with Ionic or Cordova are hybrid apps. That means those apps are just web views created with HTML, CSS and JS wrapped in a native view container. They don’t perform well on devices. On the other hand, React Native uses Native components of phones so it gives almost native performance. If you are good in React, React Native is just a piece of cake. And framework like Expo make React Native app development even easier. Framework for a framework FTW! There is one other framework NativeScript, it also uses native components for better performance. You can use Angular and Vue to build NativeScript apps.
Coming to Desktop app development, Electron is a framework that allows you to write cross-platform applications just using HTML, CSS and JS. They are just Web View wrapped in native windows. But many popular apps are actually built with Electron. For example my favourite code editor VS Code is built with it. Atom, Slack, Github, Skype, Now are other popular apps that are built with Electron. You can also use React, Angular or Vue in Eectron for building app UI. It’s web view after all. Recently, I found one other framework for building desktop apps that uses native UI component. It’s Proton Native. It uses React for building desktop apps.
Stack 3 of Full Stack Developer
Surprised? Earlier I said there are 2 major stacks in web or app development. Yeah 2 major but there is a third optional stack if you are interested in learning it. It is getting popular over the years. It’s called DevOps. With development you should also know how would you deploy your application. AWS and Heroku are two great options. AWS gives you infrastructure as a service (IaaS) that means you can launch virtual machines and run your application as you want. You can configure OS, RAM, Cores of the machine. While Heroku gives you platform as a service. That means you can deploy your application without worrying about anything else. Heroku will take care of underlying machines, OS, RAM, cores etc. In addition, you can also learn about Docker and Kubernetes.
Keep Learning
Web and App development is a domain where things change quickly. Today React is the most popular frontend framework, may be tomorrow there will be a new framework. Just like React did with jQuery. So the most important part is keep learning and keep exploring new libraries and languages. There is so much to learn.
Data Analytics and Machine Learning are also really demanding skills. If you have time and you want to learn more you should explore NumPy, Pandas, Sklearn, and Tensorflow. All these are Python’s scientific libraries. Recently, Tensorflow.js was released, which allows JS developers to build and train Neural Networks in the browser and the server. You can try that out too.
That’s it for now.
Thank you for your time.
Posted with permission from Priyansh Rastogi