Front End Web Development Menu 2019

Deployment

Register a domain name: Google Domains, Godaddy
Managed or Shared hosting: AWS, Hostgator, Inmotion
FTP/SFTP: Filezilla, Cyberduck
Static Hosting: Netlify, Github Pages

Basic tools

Text Editor: (a) VSCode (b) Sublime text (c) Atom
Editor Extensions: ESLint, Prettier, Live Server, etc.
Browser: (a) Chrome (b) Firefox (c) Opera
Browser Dev Tools: Chrome Dev, Firefox Dev
Design & Mockup: (a) Adobe XD
Code repository: (a) Git (b) Gitlab (a) Tortoise
Basic Command Line: Bash, Git
Node Package Manager (NPM) or Yarn: use to install JS Packages
Webpack/Parcel: use JS Modules without using framework
Gulp/Grunt: Task runners

Base Technologies to Learn

HTML5: Elements
CSS: positioning, animations, classes, etc
Flexbox: maniputate CSS grids
Structured CSS (Sass): variabled, nesting, functions, inheritance
JavaScript: JSON, DOM manipulation, Fetch API, ES6/7
TypeScript: superset of JS with static typing, classes, ES6-like features. This can be used with Angular, React, and Vue
Bootstrap: HTML/CSS Framework

Front-End Frameworks

React: Most popular
Vue: Gaining traction
Angular: enterprise

State Management Tools

React: Redux
Apollo (GraphQL Client)
Vue: VueX
Angular: NgRx

Server Side Programming

PHP: Largest community; Frameworks: Laravel, Symfony
Node.js: JS for the backend; Frameworks: Express, Koa, Adonis
Python: scientic applications; Frameworks: Django, Flash
C#: enterprise grade; Frameworks: Frameworks: ASP.net
Go/GoLang: best language without frameworks

Server Rendered Pages

React: Next.js
Vue: Nuxt.js
Angular: Angular Universal

Databases

SQL: MySQL, PostgreSQL, MS SQL
NoSQL: MongoDB, Couchbase
Cloud: Firebase, AWS, Azure DocumentDB
Lightweight: SQLite, Redis, NeDB

Content Management System (CMS)

PHP based: WordPress, Drupal
JS based: Ghost, Keystone
Python based: Mezzazine
C# .NET: Piranha, Orchard CMS

DevOps & Deployment

Deployment: Linux, SSH, Git, Nginx, Apache, HaProxy
Platforms: Digital Ocean, AWS, Heroku, Azure
Virtualization: Docker!
Testing: Unit testing, Integration, Functional, System

Mobile Development

React Native: build iOS targeted apps
NativeScript: similar to React with difference in coupling with Angular, TypeScript, and JavaScript (vanilla)
Ionic: build hybrid apps with HTML/CSS/JS
Flutter (by Google): uses Dart to build mobile SDK for Android & iOS
Xamarin: mobile apps with C#

Desktop Development – Electron

Electron combines Chromium & Node.js to deploy on all platforms. Examples of these are: postman, vscode, atom

Application Programming Interface (API)

GraphQL is a querying language that is more flexible than REST API. Results of GraphQL are JSON compatible.

Apollo is a client that works well with GraphQL servers. Another tool called Gatsby static site generator that is meant to integrate with GraphQL backends.

Leave a Reply

Your email address will not be published. Required fields are marked *