The best blog

Web Development 2019

Thu Jan 17 2019

Welcome to your yearly future trends check of 2019.

We will go over TraversyMedia's list of 2019 web technologies' video, I strongly suggest you to watch it. He does a great job at aggregating what professional developers know. I use his structure and many of his comments, but I will complement with my own opinions and those of others by always providing the sources. So Make sure to watch his video to see what he says. He, in no way, endorses the following content. Much of the following content can be learned through his courses.

Javascript Versions

Before starting, a quick note on javascript versions. Today we are using ES6, whose real name is EcmaScript2015! So we are 4 years behind! You may want to read how the versions in javascript work. Who creates them, on what time frame etc.

Table of Contents

  1. Level 0 : Basic Musts

    1. Basic Software & Tools

    2. Git & Tooling

  2. Frontend or Backend

  3. Level 1.φ : Basic Frontend Developer

    1. Html & Css
    2. Responsive Layout
    3. Basic Deployment
    4. Sass Pre-Processor
    5. Vanilla Javascript
    6. Components
    7. Basic Front-End Web Developer

  4. Level 2.φ : Full Fledged Frontend Developer

    1. Advanced Tooling
    2. HTML / CSS Framework
    3. Front-End Framework
    4. State Management
    5. Full Fledged Frontend Developer

  5. Level 1.β : Back end development

    1. Server Side Language And Framework
    2. Database
    3. Server Rendered Pages

  6. Fast Projects : CMS

  7. Level 3 : Full Stack Web Developer

    1. DevOps, Deployment & More

  8. Level 4 : Beyond the Browser

    1. Mobile Development
    2. Desktop Apps With Electron

  9. 2019 Trends

    1. GraphQL & Apollo
    2. TypeScript
    3. Serverless Architecture
    4. AI & Machine Learning
    5. Blockchain Technology
    6. Progressive Web Apps
    7. Web Assembly

  10. Notes

Contents

Level 0 : Basic Musts

To start on a really strong punchline:

The same way a carpenter is nothing without his hammer, a developer is nothing without the following tools.

Basic Software & Tools

At least you will need a:

  1. Text Editor (Vim, VSCode)
  2. Web Browser (Chrome)
  3. Command-line (Bash-like)
1. Text Editor

Depending on your computer OS, you will choose different tools. For Windows you may use :

  • Vim
  • VSCode
  • Sublime Text
  • Atom

On Unix-like systems, my editor of choice is Vim. With any editor the point is to accelerate your workflow. This is why if you are working with some language, you will need the proper extensions to make your life easier: for spotting errors in your code while you write etc.

Text Editor Extensions

Text editor extensions will save you lots of time and headaches :

If you are using Vim, setting up your .vimrc is like doing workout to prepare for the battle; you better do it properly.

Here are a few tips for vim with javascript development, and some more. You will most likely end up creating your own flavoring of vim tips.

The key point with vim is to spot repetitions and eliminate them by:

  1. Thinking harder (you want to create muscle memory): "How could I move there faster with the basic vim commands?"

    • Stop
    • Think a solution to get there
    • do it
    • UNDO WRONG PROCEDURES, AND REDO IT THE RIGHT WAY If you do something and you think of a better way while you do it, stop, and do it the right way.

  2. Learning more plain vim commands (learn them through best tutorials like vimtutor)

  3. writing/using vim scripts in .vimrc

  4. Plugins

2. Web Browser

For the web browser, it is generally accepted that Chromium-based browsers have great developer tools, options are :

  • Chromium, Google Chrome, Opera etc.
  • Firefox (is apparently ok too, not chromium based though)

Javascript developers, know that each browser has its own Javascript engine (V8, Chakra, Spidermonkey). V8 is the engine of Node.js. Coding on the same engine in the browser and the server, can be an advantage.

3. Command Line

If you are on Windows the command line will not be bash. There are workarounds like using Git Bash. Which allows you to run POSIX commands on Windows. Other options are:

  • Git Bash
  • WSL
  • iTerm2
  • Hyper

Git & Tooling

The command line is omnious, and knowing how to use POSIX command line is a great skill.

Another great skill is being able track the evolution of changes you make to your code (Version-Control System). One tool that rules them all: Git (Mercurial is another option, but git is more powerful).

Git allows you to track local changes to your code. Don't mistake it with GitHub and Bitbucket which are git servers for backing your local repositories up. These platforms can also be used to publish websites too, but more on that later.

Design Tools

At some point you will need to present your idea to someone. And you will admit that even when you are super enthusiastic about your idea, building the project in order to present the concept is impractical. That is why, design tools can be a great help:

  • Adobe XD is used for animated prototyping
  • Adobe Photoshop
  • Sketch is a proprietary vector graphics editor for Apple's macOS
  • Figma

Sketch is faster and feels a lot more like an actual UI design tool than Illustrator or Photoshop. Toptal

Animated SVG

You will see more and more applications with animated SVG's. Here is how it's done And a general knowledge base for SVG related stuff.

HTML5 Canvas

[Learn about how to draw and animate on the canvas][canvas-tutorial] to create amazing effects on your websites. Here is a quick cheat sheet

Frontend or Backend

Now that you have basic tools to start coding, you might wonder whether you should learn frontend or backend development first.

The answer will depend on many factors, for example: what are some projects that you would like to work on. If it falls fully into the server side, or fully in the browser side the choice is simple. If you are into design, frontend may be your preferred choice. Similarly if you want to work with data, or AI etc. then you can start with the server.

If you have no preferences, the coin flip is always a good friend.

Each industry has their own language of choice. For example for AI, Python is used. But there are other recent languages like Go which are taking off.

Nowadays Javascript is becoming the "trendy" language for full-stack web developers. Why? Because of projects like Node.js, which run on the server side, and new architecture trends like JAMStack; javascript language is prevalent.

Level 1.φ : Basic Frontend Developer

Html & Css

The front end building blocks are HTML and CSS. Like when speaking a language, the more words you know the better you can express concepts. Knowing HTML and CSS is a must for building designs that work as expected.

You will need to learn:

  1. Semantic HTML5 Elements Semantic elements are those HTML tags which specify a meaning to what they contain. It should be opposed to non-semantic elements, which don't require anything of the content, like <div> or <span>. In HTML5 we have the new semantic elements:

    • <article> : Is independent content which should make sense on its own, like a blog post, a news article etc.
    • <aside> : defines side content relative to the content it is contained in
    • <details> : additional information that could be skipped
    • <figcaption> : gives a caption to the image in the container figure
    • <figure> : is the container for an image along with a figcaption
    • <footer> : contains other information about the container document or section
    • <header> : contains introductory information about a document or section
    • <main> : the main content of a document, it should be characterizing that document. So no reused content should be placed in it
    • <mark> : equivalent to a highlighting marker
    • <nav> : a set of navigation links
    • <section> : A section is a thematic grouping of content, typically with a heading
    • <summary> : contained inside a details element. Summarizes the content in the containing details element
    • <time> : date and time of a document

  2. Basic CSS (Positioning, box model, etc.) An element who has no explicit position value, or a static position value is an element who simply adopts a position in the normal flow of the document. The top, bottom and right, left do not work. A positioned element is an element whose computed position value is (anything but static) either (Learn CSS Positioning from Mozilla):

    1. relative :

      • element adopts his normal flow position.
      • The space given to the element in the layout is the same as if its position were static.
      • Final position is determined by top, right, bottom and left values relative to its initial position. The offset, does not affect the original layout.
      • This value creates a new stacking context when the value of z-index is not auto

    2. absolute :

      • element is removed from the normal document flow.
      • no space is created for the element in the page layout.
      • Final position is determined by top, right, bottom and left.
      • Positioned relative to its closest positioned ancestor, or relative to the initial containing block
      • This value creates a new stacking context when the value of z-index is not auto
      • The margins of absolutely positioned elements do not collapse with other margins.
      • By default spans 100% of parent width, and has same height as children content.
      • Total width = content + padding + border width/height

    3. fixed :

      • element is removed from the normal document flow,
      • no space is created for the element in the page layout.
      • Final position is determined by top, right, bottom and left
      • Positioned relative to the initial containing block established by the viewport except when one of its ancestors has a transform, perspective or filter in which case that ancestor behaves as the containing block.

    4. sticky :

      • element adopts his normal flow position.
      • Final position (before scrolling) is determined by top, right, bottom and left.
      • During scrolling, the element will stay in view port as long as there is room for it to move within the containing block still visible in viewport.
      • (Negative top does not seem to work, because it makes it get out of containing box and the element always stays within the containing box.)
      • offset according to its nearest scrolling ancestor and containing block (nearest block level ancestor) including table-related elements
      • offset does not affect the position of any other elements
      • Always creates a new stacking content

  3. Flexbox & CSS Grid

    The flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.). Note: Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.

    • Flexbox Layout is largely a 1-dimensional system aimed at providing a more efficient way to:

      • layout
      • align
      • and distribute space among items in a container

    • Grid Layout is a 2-dimensional system, meaning it can handle both columns and rows

      CSS Grid Layout is the most powerful layout system available in CSS. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that elements children (which become Grid Items).

  4. CSS Variables (Custom Properties)

    CSS variables are what their name says, just variables usable throughout your CSS code. You can define a variable as follows :

    element {
  --main-color: brown;
}

    and then get its value using the var() function as :

    element {
  background-color: var(--main-color);
}

    Read more at CSS Custom Properties (Variables) at Mozilla

  5. Browser Dev Tools

    You want to get familiar with your browser developer tools, like Chrome Developer Tools (the shortcut in mac is alt+cmd+I). These allow you to monitor performance, inspect elements, console output, computed css etc.

Responsive Layout

Responsive layouts are almost mandatory. As of November 2018, around 40% of internet traffic is made through a mobile device in western countries, and numbers are above in Asia.

This only means that if your website does not look good in mobile phones you will be unsatisfying customers. They will flock to the competition. The technologies to make responsive websites do exist, use them.

Here is an explanation of the different layouts with examples. They are categorized under the way the layout reshapes once the screen size changes.

Use the following techniques:

  • Set Viewport

  • Fluid Widths / Liquid page layout : uses relative units (em or rem). See an example

  • Media Queries : media queries allow you to specify different rules depending on the screen size

  • Use rem over px : the advantage is that rem and em can be set to some amount of px, this gives you the flexibility to scale your website according to the screen size.

    • rem are computed w.r.t the font-size set in the root tag i.e. <html>. So : 1 rem = <font-size> px then n rem = n * <font-size px> etc.
    • emon the other hand are computed w.r.t the element being styled or parents and not w.r.t to the root. This will make code tricker to maintain due to inheritance if there is not a proper strategy.
    • Read rem v. em tutorial to see other imporatnt aspects.

  • Design Mobile Layout 1st : design the layout for mobile version, with stacked columns, before doing the desktop version. To do the desktop version you add the media queries for larger screens. (You go from max constraint to lesser constraint, so it gets easier later. Less likely to need to rewrite the code do to additional constraints down the road (but it's a matter of taste)).

Basic Deployment

Learn how to deploy a static website, using either traditional hosting services, or static hosting services like Netlify (good for basic landing pages?) for which you will need to know Git. Another tutorial from Netlify using JAMStack

Later on, once you are more advanced, you might use AWS or Heroku. Where you will be interacting with the command line SSH and Git, Docker or Vagrant to deploy. But for the moment it is ok to use FTP.

Sass Pre-Processor

Sass empowers you with a more comfortable development environment for keeping ever growing CSS code bases more maintainable. It brings :

  1. Variables (although we have custom properties now, but sass variables are more readable)
  2. Nesting
  3. Mixins and Functions
  4. Inheritance
  5. and more

It allows you to write your CSS more like a programming language.

Sass makes coding CSS fun again. Sass.org:

You can learn Sass on their website.

Sass is not understood by the browser directly, so you will have to compile it. The most used compiler implementation is node-sass even though Dart-Sass is the primary implementation, which therefore gets all the new features before any other (and it compiles to pure Javascript). Here is how to install sass.

Vanilla Javascript

Start learning JavaScript without any library or framework. This Udacity course can get you there.

Learn about :

Also learn about the new features of ES6:

  • Promises learn it through a video course, or text article

    • async / await : a special syntax to work with promises in a more comfortable fashion

  • Destructuring Assignment

      let [hello, hey] = [1, 2, 3, 4]
  console.log(hey); // 2

  // Useful for swaping two variables without a 3rd temp variable
  let a = 1, b = 2;
  [a, b] = [b, a]
  console.log(a) // 2
  console.log(b) // 1

  // Return two values
  let [a, b] = (function() {return [1,2];})(); //IIFE
  console.log(a) // 1
  console.log(b) // 2
  // or using arrow functions
  let [a, b] = (() => [4,5])(); //IIFE using arrow function
  console.log(a) // 4
  console.log(b) // 5

  // Object destructuring
  let one, two, sum;
  {y: one} = {y: 1}
  {q: two} = {p: 2}
  {x: sum} = {x: one + two}
  console.log(sum) // 3

  • Arrow functions

      const myFunc = (param1, param2) => {
      param1 = param1 + 3;
      return param1 + param2;
  };
  const myFuncSingleStatement = (param1, param2) => {
      param1 + param2;
  };
  const twoTimes = x => 2 * x;
  // With destructuring (from Mozilla)
  let myFunc2 = ([one, two] = [1, 2], {x: sum} = {x: one + two}) => one + two + sum;
  myFunc2(); // 6 // where one=1, two=2, sum=one+two=1+2=3

Learn about best practices and design patterns and testing

Components

Components are reusable stand-alone parts of an application that handle a single functionality. You can learn a lot from components built in vanilla javascript. Then for the case of using vanilla javascript vs. frameworks, read this, but I have no opinion yet.

Basic Front-End Web Developer

Now you should know how to :

  • Build static websites (Small business, informational)
  • Build UI layouts (Take a design and create the html/css)
  • Add dynamic functionality (modals, slideshows, etc.)
  • Deploy and maintain websites

Once you have mastered the skills above, you will be able to do some proper front-end development. If you rely on traditional CMS's like Wordpress which have lots of plugins to get you running, you will easily complete most freelancing jobs for small business showcase websites.

Level 2.φ : Full Fledged Frontend Developer

If you are aiming high and want to become a Full-fledged Front-end developer, the next step is to learn libraries / frameworks. Why? Because when you start, coding from scratch lets you build a solid knowledge from the ground up. However, you will find yourself doing repetitive code, and eventually you will want to reuse some code, by bundling it into a package etc. You are free to do so and share.

But then again, you are not alone, and probably someone else has tried to implement the same functionalities you are interested in. So why not just use other people's code. It will get you there faster. Moreover, popular frameworks have the benefit of validation (lots of people think they are useful if they are using it), which means the popular frameworks have proven their value; they must be coded in a valuable way. By using other people's code, you will grasp industry standards, best practices, win time, and be able to cooperate with teams of developers.

Advanced Tooling

  • You will have a proper .vimrc for your framework (for example react)
  • You will know Git. Learn it here
  • You will use NPM or Yarn for installing packages. NPM is a bit easier.
  • Webpack or Parcel allow you to use Javascript Modules without using a framework. Usually with a framework like React or View you have webpack bundled in the CLI, so you don't need to install it separately. Parcel is a bit easier. Webpack can get really complicated with its configuration.
  • Gulp or Grunt task runners. They are not as useful as they used to be. For the most part you can use Npm Scripts or Webpack Plugins for a lot of things. And frameworks now have CLI's that automate lots of tasks.

HTML / CSS Framework

HTML/CSS frameworks are becoming a bit less relevant, but knowing one will let you prototype faster:

  • Bootstrap : is the most popular, it has many useful designs and functionalities
  • Materialize
  • Bulma

Front-End Framework

As stated before, using a framework will make you a better developer and a more valuable one for companies that need teams to work on projects. There are several front-end frameworks:

Which Js Framework to choose?

You are free to choose the one that you prefer. Knowing which you prefer when you have never used any is actually impossible. So there are two options:

  1. You can learn them all and build a project with each. Which can be very insightful and will certainly make you a better developer.
  2. You can read what others say about them. You will soon realize that people have different tastes. Apart from that, there are always key strengths of each solution.

You can still use the server to render templates and send them to the client. But it seems to be the trend now that we have heavy weight

React

Most popular in the industry. Started/Maintained by Facebook, which gives lots of credibility that others like Vue can lack. High volume of adoption: easy to find skilled devs

Must read : thinking in react

Advanced read: design principles

Vue

Is taking up quickly

Angular

Angular is fading.

Comparison Metrics

Most of these metrics and analysis are taken from From code in WP, worth the read.

The number of commits and contributors for Vue are lower than Angular and React. One possible explanation is that Vue is driven entirely by the open source community, whereas Angular and React have a significant share of Google and Facebook employees contributing to the repositories. Code in WP

Another interesting metric is compiled by StateOfJs have a look at it, it will give you some insight behind the popularity metrics.

For example when we say Vue has 124.9k stars on GitHub, you may wonder: "Ok, but of these 124.9k, how many actually have used it?". This is exactly the answer we can get with this additional survey. For each framework StateOfJs asks developers what they know, and what they think:

  • Never Heard of it
  • Heard of it, not interested
  • Heard of it, would like to learn
  • Used it, would not use again
  • Used it, would use again

For example for Vue, 67.1% of developers have never used it. So we could proxy this and say it makes 41k stars of developers who used it. If we compile this for each we get "real" user stars : stars of users who not only heard of it, but who also actually used it. So that gives a better summary of the current state of things. Of course it is based on wrong assumptions. Anyways, we will combine both statistics to try to prospect future trends through those green/red bars. We have that :

  • Angular : 59.8k "real" user stars
    • retention rate of 42% of current users
    • medium short term prospective market : 42.1%
      • low : 32% potential conversion of that prospective market so 10.4% of total
  • React : 85.6k "real" user stars
    • retention rate of 90.6% of current users
    • small short term prospective market : 28.3%
      • high : 67% potential conversion of that prospective market so 19.1%% of total
  • Vue : 41.0k "real" user stars
    • retention rate of 91.1% of current users
    • big short term prospective market : 67.1%
      • high : 68% potential conversion of that prospective market so 46.6%% of total

From the green bars we can estimate who will try to use the framework in the short term. And from the red bars, we can estimate who will use it in the longer term in a feedback loop.

All in all, the future is not so bright for Angular because retention is not as good as competitors, and prospective users seem to be aware of it. For React, the trends are solid, cannot grow much more. The contender Vue has still lots of market space to grow in the short term.

Of course these are just numbers which do not tell us what kind of users, use the frameworks. Maybe Angular has so much publicity that many people have heard of it, but they are scared of the learning curve. Maybe the reason that those who have used it and don't want to use it anymore, is that they think it's too big for their project type. Fortunately, in order to gauge the quality of users, StateOfJs survey has additional interesting metrics.

Vue, Angular and React are open source frameworks subject to the MIT License. Always understand the implications of using any piece of code under its license.

Note: there was this debate about not using React for your projects if you were a startup because of Facebook's licencing of React (they used "BSD + Patents"), but the debate is over, and Facebook changed the React license to MIT, which is safe to use. A clear win of Open Source community which has managed to push them there.

Apart from the frameworks' licenses, you must be aware of Copyrighted material in general. To help you with that, CopyrightUser.org provides a lot of interesting articles on rights and permissions.

State Management

Your application data will change. All the components using that data will have to be notified of the change in order to update the views. Concepts in State Management:

  • Immutable State
  • Stores
  • Reducers
  • Mutations
  • Getters
  • Actions
  • Observables

Some libraries :

  • Redux, ContextAPI
  • Apollo (GraphQL Client)
  • VueX
  • NgRx

When Michael Jackson talks about state management in React, you should probably listen. He talks about code reuse through Mixins (dead with ES6), replaced by HOCs (Higher Order Components, also dead) which did not solve all the problems with Mixins, namely :

  • ES6 classes support
  • Indirection
  • Naming Collisions

but eventually everything got "solved" with Render Props.

If you really have spare time,read about state machines

Full Fledged Frontend Developer

Now that you have mastered all these concepts, you can consider yourself a Full Fledged Front-End Web Developer. You are now able to :

  • Build incredible front-end applications
  • Have a Smooth & steady front-end workflow
  • Work well with teams and are familiar with Git
  • Connect to backend APIs & work with data

You should be able to get a front-end job or work for yourself and do pretty well.

Design Patterns

Design Patterns in Javascript will always be useful

Level 1.β : Back end development

To be a full stack or software engineer, you will need to learn a server-side language/technology. While you learn the languages you should focus on:

  • Fundamental Syntax
  • Structure & Workflow
  • Package Management
  • HTTP/Routing

Server Side Language and Framework

  • Node.js :

    • Why? :

      • Reuse developers Javascript knowledge
      • Web applications with real-time, two-way connections. Non-blocking, event driven I/O. Real-time web applications employing push technology over websockets

    • Bad at :

      • CPU intensive applications

    • Frameworks :

      • Express
      • Koa
      • Adonis

    • Package Management :

      • NPM
      • Yarn

  • Python

    • Why? :

      • It's everywhere : servers, embedded devices. Has builtin HTTP functionality, and great libraries
      • Used by big companies : Disqus, PBS, Nasa, Mozilla, Reddit etc.
      • Used in science with libraries like : numpy, scipy, matplotlib, earthpy, basemap, astropy etc.
      • Used in animation : Maya supports Python. Disney and Lukasfilm use it.
      • Can build desktop apps with libraries like Tkinter
      • Indentation delimits statements

    • Framworks :

      • Django
      • Flask
      • Pyramid

    • Package Management :

      • pip

  • PHP

    • Why? :

      • It's installed on most servers
      • The most used language of the web today (for historical reasons, but still you will find php code somewhere)
      • Has great developer community which is willing to help you learn

    • Frameworks :

      • Laravel
      • Symphony

    • Package Management :

      • Composer

  • C#

    • Why? :

      • You truly love Microsoft Servers

    • Bad for :

      • You already know POSIX, stay away from Microsoft Servers

    • Frameworks :

      • ASP.NET

  • Go Have a look at Go

  • Java

    • Why? :

      • It is the most popular language in the world
      • Runs on the JVM

    • Why not? :

      • Runs on the JVM

    • Frameworks :

      • Spring
      • JSF

  • C/C++ :

Database

You will need some way to persist your data. Unless you are doing static websites where your only data are posts, which could be persisted as Markdown files, you will need some kind of Database.

  • Relation Database : In relational databases you need SQL. It is a language that varies depending on the implementation used. Worth knowing some flavor at least.

    • MySQL : GNU-GPL, is now owned by Oracle

    • MariaDB is an open-source fork of MySQL

    • PostgreSQL : open-source project, Postgres Licence

      • standards-compliant,
      • transactional
      • ACID-compliant out of the box,
      • has wide support for NoSQL features

    • MS SQL : as always with MS, only use it if you have no other choice

      • You can get around using their drivers by using TDS, ODBC.

  • NoSQL (Not Only SQL):

    • MongoDB
    • Couchbase

  • Services (Cloud):

    • Firebase
    • AWS
    • Azure DocumentDB : try to stay away from MS

  • Lightweight :

    • SQLite

    • NeDB

    • Redis

    Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker. It supports data structures such as strings, hashes, lists, sets, sorted sets with range queries, bitmaps, hyperloglogs, geospatial indexes with radius queries and streams. Redis.io

Which licence is better for my project? In short PostgreSQL licence is much more flexible.

NoSQL vs. SQL

You've been using SQL forever, and never gave a try to NoSQL? If the reason for that is that you do not understand what NoSQL really is, here is a great introduction:

  • Structure :

    • SQL : Tables predefine what will be contained in each row
    • NoSQL : no structure of what is stored : document based, key-value paris, graph databases or wide-column stores.

  • Scalability :

    • SQL : Vertical scalability, that is : more CPU, RAM, SSD, etc.
    • NoSQL : Horizontally scalable : more traffic by sharding

SQL databases are good fit for the complex query intensive environment whereas NoSQL databases are not good fit for complex queries. On a high-level, NoSQL don’t have standard interfaces to perform complex queries, and the queries themselves in NoSQL are not as powerful as SQL query language. TheGeekStuff

Server Rendered Pages

To make static sites load faster, and to use CDN's you can use Static Site Generators. Note that these are required in order to make a website comply with the JAMStack. Anything that can be computed at deploy time, should not be computed at runtime. Therefore static site generators, help you in that path. You can find a list here :

  • Jekyll
  • Next
  • Hugo
  • Gatsby

Frameworks like React, Vue or Angular can also be rendered on the server:

  • Next.js (React): why it is great
  • Nuxt.js (Vue)
  • Angular Universal (Angular)

Fast Projects : CMS

The term CMS has evolved in meaning recently. Usually CMSs (Content Management Systems) were in charge of Managing Content : from creation, to storage, to retrieval, to presentation. This is becoming less true, CMSs are now evolving towards Single Responsibility Principle : managing content as a service (storage and retrieval) through a Rest API or similar. The terms in use now to separate from both concepts are: CMS (or traditional CMS) an Decoupled/Headless CMS (for content as a service).

CMS: Headless CMS vs. Traditional CMS

I've been using Wordpress for the clear part of my freelance career. All the goodies that it brings (mostly plugins) are now supposed to be trashed for the sake of employing state of the art technologies?

It is true that Wordpress can be annoying, because it wasn't really designed, if sort of just happened. But its merits are a costless website setup with lots of functionalities.

As developers we should always ask ourselves whether the technology that we are pushing forward is benefiting the end customer at all? If not, then it will be difficult to sell up.

We have all this JAMStack evangelization going on, that one might wonder whether using a CMS is still "allowed".

This is a legitimate question and, gladly, knowing when to use a Headless CMS has been addressed by Dean Barker.

Traditional CMS

A CMS is great for Freelancing, since it allows you to create content quickly, and it gives your clients the freedom to modify content (a big selling point). Here is a list :

  • PHP : Wodpress, Drupal, both can be run in "Decoupled" mode
  • Javascript : Ghost, Keystone
  • Python : Mezzanine
  • .Net : Piranha, Orchard CMS

Wordpress has the advantage of being the most popular and with a great supply of plugins. Customers tend to know the admin interface already. If your customer does not know wordpress, and there is no specific plugin you need from Wordpress, then you can give a go at Headless / Decoupled CMSs.

Decoupled/Headless CMS

Headless/Decoupled CMS, manages content creation, storage and retrieval. Not presentation. Some of the old CMSs can be turned into Headless. But here we will focus on true Headless CMSs. One categorization of Headless CMSs is the flavor:

  • Git Based
  • API Based, you will use GraphQL to query the API

Here is a short list of some true Headless CMSs compatible with the JAMStack :

  • Ghost (API based), example [DuckDuckGo Blog][duckduckgo-blog-ghost]
  • Strapi.io (API based)
  • [Netlify][netlify] (Git Based)

You can find a wider list on HeadlessCms.org

Level 3 : Full Stack Web Developer

DevOps, Deployment & More

The goal of DevOps is to shorten the systems development life cycle while delivering features, fixes, and updates frequently in close alignment with business objectives. Wikipedia

Here is a depiction from Amazon: Diagram of DevOps by Amazon

DevOps is the combination of cultural philosophies, practices, and tools that increases an organization's ability to deliver applications and services at high velocity: evolving and improving products at a faster pace than organizations using traditional software development and infrastructure management processes. Amazon AWS

You can read their article which is very informative. Or learn it from Udacity's free Course : What is DevOps?

DevOps : Vagrant

The goal of Vagrant is to solve the problem :

Ok the code works on my machine, but it doesn't work on production server! How to deal with this?

This happens because your code runs on a different machine than the production server (e.g. Ubuntu 16.04 v. Windows 10 v. MacOs X 10.14.1), and therefore you have two options:

  1. Change the code and setup the server to make both work together
  2. Make your machine look exactly like the server

The first option can be very costly if there is a lot to setup on the server or a lot of code to change. That is why, Vagrant comes up with a Virtual Machine solution. It will install a VM on your development machine that replicates exactly your staging and production servers. Therefore you don't need to change any of your code once you push your code to production. This is achieved through a Provisioning Script that allows Vagrant to configure the whole thing.

DevOps : Docker

Docker is a computer program that performs operating-system-level virtualization, also known as "containerization". It was first released in 2013 and is developed by Docker, Inc. Docker is used to run software packages called "containers". Wikipedia

Docker is similar to Vagrant in that it wants to solve the same problem. But it solves it differently. You can watch a nice video explaining the difference.

Whereas in Vagrant we had to push our code to the server, now with Docker we build on top of a container. The container is configured with a 5 to 30 line config file (Dockerfile), telling Docker what software tools should be included in the image (e.g. Apache, MySQL, PHPMyAdmin, Nodejs etc.). Once the container is set up, you create your app by coding on top of it. Then you tell Docker to create an image. That image, will be able to generate Docker containers in any machine running Docker (no need for the machine to have Apache or Nodejs installed, the image contains all of those according to your Dockerfile). And you can install as many containers as your memory allows.

A container is like a server running your app with all its dependencies installed.

Instead of pushing your code, you upload your Docker image into some server running Docker. Then docker will do the deployment and config for you.

There are services that allow you to streamline the whole building and distribution (Docker Hub or Quay.io)

Level 4 : Beyond the Browser

Mobile Development

There are some frameworks that allow you to create native apps with web technologies.

  • React Native (Build native apps with react)
  • NativeScript (Angular, TypeScript, JavaScript)
  • Ionic (Hybrid apps with HTML/CSS/JS
  • Flutter (Mobile SDK for Android & iOS using the Dart language)
  • Xamarin (Mobile appsi with C#

Desktop Apps With Electron

Electron is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux. from Electron

The success of Electron comes from web developers who suddenly can pretend to know how to write desktop apps. And this is all fair, why not after all? As long as the app does the job, who cares what code is behind it.

Electron Cons
  • Electron uses memory
  • Electron is not really native, not at all actually
  • Electron developers are not desktop app developers
Electron Pros
  • Electron apps can be built in javascript which is becoming prevalent.
  • You can create a single app for web, mobile and desktop

You can read about Electron app distribution in their webpage You can also check capacitor which uses Electron to make their PWA (Progressive Web Apps) available on desktop. It is in beta mode.

Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, and the web

GraphQL & Apollo

GraphQL is a specification, meaning that it's sort of a language, and there are many implementations of that specification. It was initially created by Facebook, but the specification is not owned by anybody... This means there are different implementations not owned by Facebook. GraphQL is a revolutionary new way to query APIS. It is much more flexible that the standard REST.

  • Ask only for what you want
  • Front & Back end can collaborate more smoothly
  • Writing queries is very easy and similar to JSON
  • Apollo is a client that allows you to make requests to a GraphQL server
  • Used with the Gatsby Static site generator

TypeScript

TypeScript is a superset of JS with additional features including static typing

  • Types for variables, functions, etc.
  • Classes
  • Other ES6-like features
  • Used in Angular but can be implemented in React & Vue

Serverless Architecture

Eliminate the need for creating and managing your own server

  • Use 3rd party services to execute "Serverless Functions" (FaaS)

    • AWS
    • Netlify
    • Firebase

    They are popular with Gatsby static sites

  • Serverless framework (Toolkit for building serverless apps)

AI & Machine Learning

AI & Machine Learning have been huge in almost every area of programming & technology including web development.

  • Machine learning can allow web apps to adapt over time
  • AI has a long way to go but [Traversy] suspect we will see more of it on the web dev
  • Used heavily in Python but there are also JS libraries like TensorFlow.Js and Brain.js

Look into CUDA programming. And learn deep learning here: [www.deeplearningbook.org][dlb]

Blockchain Technology

Companies using Blockchain for digital transactions in order to make them more efficient ant secure

  • Solidity (Language for implementing contracts)
  • Mist (Used for storing Ethereum, sending transactions & contracts
  • Coinbase API (Blockchain devs can easily build apps and integrate Bitcoin)

 Progressive Web Apps (PWA)

Progressive Web Apps are regular apps but give the user a native app experience in terms of layout and functionality

  • Responsive to fit any form factor
  • Service workers for offline availability
  • App-like interactions
  • HTTPS
  • Reliable, Fast & Engaging

Web Assembly

Assembly-like binary format for code that can be executed by web browsers. Can be generated from higher level languages like C/C++ & Rust

  • Faster than JavaScript
  • Secure - Enforces same origin & security policies in the browser
  • Open & debuggable

Notes

With the rise of the JAMStack, markdown seems to have become the lingua franca for writing documents. If you have tried Markdown for very simple documents, it might seem simple and great. But once you create a longer more complex document, you will see there are a million different implementations which are not compatible with each other. So your document will compile correctly on one if you are lucky, but there is ambiguity. To be consistent, you need to learn and follow a specification that is unambiguous. GitHub Flavored Markdown is based on Commonmark specification with additional non-standard features like check lists, language specific code highlighting. It is important to note that a single specification will not suit all needs, that is why there are many. For developers GFM is probably the most adapted.

Remember we started using Markdown because it was :

  • less verbose and
  • so easy to learn

But when you read the spec, you notice that what was initially an easy language has become relatively more difficult to master. And thanks to editor extensions like [Emmet][emmet-vim], that will expand your html markup for you, the "it's less verbose part" argument is loosing weight.

What is important here, is that you use a solution that is unambiguous and for which you have tools that let you write fast. With unambiguity, you will always find translators.

[dlb][http://www.deeplearningbook.org/]