Guide to Web Technologies (For Recent Bootcamp Grads)
By Alex Merced of AlexMercedCoder.com
*Alex Merced is an Instructor for General Assembly in their Software Engineering Immersive Courses and a Full Stack Developer for Crossfield Digital
All employers need Front-end developers creating their UI logic, nowadays with Single Page Applications more and more of the work is on the front end using frameworks such as React, Angular and Vue. React and Angular 9 are the two behemoths, and Vue has a quickly growing chunk of the market. Svelte is an up and coming framework gaining a lot of popularity among developers but isn’t a great source of employment quite yet. Also make sure to check out my colleague, Arthur Bernier’s, Kofujs which incorporates aspects of React and Vue. Another big technology is Web Components which allow you to do component-based design like the above frameworks using no frameworks, the only issue is that old browsers aren’t compatible with this relatively new browser API.
As that changes expect much of front-end design to shift to web components as it will dramatically speed up websites by reducing bundle sizes and code complexity. Frameworks built around web components include Google’s lit-element, Salesforces Lightning Components, Ionics Stencil, and my very own MercedUI (http://www.alexmercedcoder.com/jslib/).
Older applications may still be heavily using jQuery and AngularJS so there is still employers demanding these skills.
React is by far the largest Front-end framework at the moment and has a wide amount of staple libraries that are useful to know. Here is a brief list of super popular React libraries to expand your react abilities.
React Router — Create links that render components to a target area of the page
Formik — make working with forms in React much easier
Styled Components — Create components that style your other components
Angular aims to be a complete solution so instead of learning a lot of libraries Angular provides almost everything for every situation right outside of the box, so it takes a lot time to appreciate everything angular has to offer.
Vue offers a nice in-between to the styles and complexity of React and Angular and has a wide variety of Libraries, although they are mainly in categories where similar libraries exist for React and Angular so I’ll cover them by category.
Component-Based design often encapsulates all data in a concept known as state but often the same data is needed in multiple components creating a complex set of relationships between stand-alone components that can drive developers nuts. State management libraries provide ways to move some of your data to an application-wide scope to make this easier to manage.
Angular Developers usually use ngRx for state management
React Developers usually use Redux for state management
Vue developers usually use Vuex for state management
Server Side Rendering
While single-page applications rendered on the front-end are faster there are features such as the use of URL parameters that can only exist if the website is rendered from the server. So new frameworks have been built to allow you to use your favorite front-end framework for server-side templating. This way you can split your React, Angular and Vue code across the back-end and front-end of your code.
Angular Universal allows for Server-Side Rendering with Angular
NextJS allows for Server-Side Rendering with React
NuxtJS allows for Server-Side Rendering with Vue
Sapper allows for Server-Side rendering wtih Svelte
Static Site Generators
Gatsby is an SSG that uses React and GraphQL
Gridsome and VuePress are SSGs that use Vue
Scully is an SSG for Angular
Hugo and Jekyll are other popular JAMstack SSGs
Front-end Frameworks using Typescript: Angular and Stencil both incorporate Typescript by default while there are templates to use Typescript with React or Vue.
Back-end frameworks that have embraced Typescript include NestJS and FoalTS
GraphQL is a technology created by Facebook to create more robust APIs. Instead of creating several API endpoints that give you more data than you need you to use a single endpoint and use a special query language to ask for ONLY the data you need.
Wordpress and Headless CMS
Wordpress dominates the world of content management systems. There are platforms that allow much of the creation and management of the website to be done from a backend GUI. Usually, these CMS platforms also handle a lot of templating and rendering of your pages making them not as fast as a single page application made with React, Angular or Vue but their visual management is great for clients who can’t afford full-time web developers to maintain their site. Although new platforms like Contentful, ButterCMS and GraphCMS offer what’s called a Headless CMS.
A headless CMS offers the graphical backend management without the front-end rendering. So you’d build out all your data such as blogs using their GUI, but the data is delivered via a RESTful API with which you can build a front-end application using the technology of your choice on top of. Wordpress has also added a built-in API so you can use Wordpress as a headless CMS as well.
*Wordpress is built using the PHP programming language and Wordpress makes up over half of the websites on the internet and PHP is used on approximately 78% of the websites on the internet.
More Back-end Frameworks
Pretty much any language can be used in the backend so there is a lot of diversity but nowadays technologies like Docker and Cloud Services (AWS, Azure, Google Cloud) have made a lot of the backend more turnkey so learning about those services can make you very useful in devOp roles.
For larger conglomerates they are usually going to use older tech supported by larger companies (they aren’t taking risks), so you’ll often see use of Java and its Spring framework or Microsofts .NET framework which uses C++, C#, F# and VB.NET as its languages of choice. These companies are not risk takers so they often are also pickier about the educational background of their employees.
Although when it comes to web start-ups and medium to large established web applications there is a lot more room for entry and diversity on what language and framework is being used so here is a brief overview of some of the most popular frameworks.
Python: Django or Flask
Ruby: Rails or Sinatra
PHP: Laravel or Symphony
*Go is a programing language created by Google to create a good developer experience around developing faster applications vs using other low-level languages like C++ or Java. Many companies who need some additional speed in their backend servers may consider switching to GO once they’ve pushed Node/Python/Ruby to their limits.
CRYSTAL AND NIM
Python and Ruby are higher-level programming languages with features like dynamic typing and garbage collection which make them easy to learn and pleasant to develop with but does come with some cost of speed as an application takes on larger and larger scales of use. So in order to keep a familiar syntax but add features like Typing and manual garbage collections to increase speed, Crystal and Nim were created.
Crystal is essentially a compiled statically typed version of Rubys interpreted dynamically typed language.
NIM is essentially a compiled statically typed version of Pythons interpreted dynamically typed language.
Functional Web Languages
Functional Programming has grown a lot in popularity especially since React makes many Functional programming practices core to its design. There are a handful of Niche languages that were created to create a first-class functional programming experience in web development. These languages include ClojureScript, Elixir, ReasonML and ELM.
More and more people use their mobile devices as their main computing and internet device so mobile development is an important topic. With new APIs like service workers and better styling techniques, it’s become easier to create websites that give an almost mobile application-like experience, often referred to as a Progressive Web Application (PWA).
Although there is still a demand for users to have a Native mobile app for their favorite applications so here are some of the technologies for making Mobile Applications.
Swift is the programing language for iOS apps, there is a back-end framework for creating APIs with Swift called Vapor
Kotlin is the programming language used for Android apps, there is a back-end framework for creating API called kTor
Kivy is a framework in Python for creating Android and iOS apps
Xamarin is a framework in the .NET world for creating Android and iOS apps
Dart is a programming language that can be used for Mobile development with its Flutter compiler which lets you compile to Android or iOS. Dart can also be used for web apps.
RubyMotion is a framework for creating mobile apps using Ruby
- Ballerina is a programming language created to incorporate working with cloud services built-in.
- Bosque is an experimental programming language Microsoft is working on that is said not to have loops.