Road Web front-end web-learning 2

Original link: http://www.cnblogs.com/mokeycode/p/10499743.html

 

2019 Guide to Web development technologies and trends

· 2019/01/23  JavaScript  ·  Trends

Reprint: Original Source:  Lee Tong-hui (http://web.jobbole.com/95622/)   

I especially like the following from a Youtube channel:  Traversy Media

This is a 2019 you became the front, back or full-stack developer of Advanced Guide:

1. You do not need to learn all the techniques to become a web developer
2. This guide is just a simple breakdown of the technical options
3. I'll start with my experience and recommendations given in reference
4. We will introduce choice for general knowledge, and finally introduce some trends of the Web 2019

1. Basic front-end developer

1.1 HTML & CSS

The most basic knowledge:

• Semantic HTML elements
• CSS-based syntax
• Flexbox & Grid
• CSS Variables
• Browser Developer Tools

1.2 Response layout

Responsive design will no longer be added to sub-pages, but a necessity

• Set viewport
• Non-fixed width
• Media Inquiries
• Use  rem alternative px
• Mobile first columnar display

1.3 based deployment

Learn how to deploy a static site to a server

• Register a domain name (NameCheap, Google Domains)
• Management shared hosting or virtual machine (Inmotion, Hostgator, Bluehost)
• FTP, SFTP file upload (Filezilla, Cyberduck)
• Static page hosting (Netlify, Github Pages)

1.4 SASS preprocessor

Although not required, but is recommended to learn, to master the basics are simple

• Structured CSS
• variable
• Nested Style Sheets
• Minxins & Functions
• inherit

1.5 native JavaScript syntax

Do not use any framework and reservoir learning grammar native JS

• Data types, functions, condition judgment, cyclic, Minato ZongFu
• DOM manipulation and event
• JSON
• Fetch
• ES6 + (arrow function, Promise, async / await, deconstruction)

1.6 meet the conditions for basic front-end developer

• Building a static site
• Building a UI layout (design can be used to get the HTML / CSS reduction)
• Add some interactive features
• Deployment and maintenance of the website

Now you can find the lowest level of Web development work, but this is not enough ....

2. a sophisticated front-end developer

2.1 HTML & CSS framework

HTML / CSS framework currently no less meaningful before, but I mind if you choose a study (where the author wants to imply should be in jquery age, learning HTML / CSS framework is necessary).

• BootStrap
• Materialize
• Find

2.2 Git and other workflow tools

Git absolutely every Web developer must master the tools, here are some suggestions of other workflow tools.,

• Based command line ( touch,  cd,  mkdirwhat's gotta be, the following command line tools will be used)
• Git (version control)
• NPM or Yarn (package management)
• Webpack or Parcel (Packaging Tool)
• Gulp or Grunt (task management and build tools)
• Editor plugin (ESLint, Prettier, Live Server, etc.)

2.3 front-end frame

In the current study a front-end front-end development framework is necessary.

• In large companies to develop very popular
• More interesting & interactive UI components
• Components of the modular front & Code
• Beneficial to the team

2.4 State Management

For large projects using front-end framework, you may need to use state management tools to manage your application-level state

• Redux(Context API)
• Apollo(GraphQL Client)
• Vuex
• NgRx

2.5 satisfies a condition mature distal Developer

• Building a good front-end application
• Front-end work smooth and steady flow
• People familiar with Git & Development
• Rear API & request data in response to a front end

Meet the above conditions, you can find a front-end work smooth and doing a good job ~

3 Full Stack Engineer

3.1 back-end learning a language

To become a full-stack engineer or software engineer, you will need to learn a server-side language and related technology

• Node.js
• Python
• PHP
• C#
• Go

Learning sequence:

• Based back-end language syntax
• Data structures and workflow
• Package Management
• HTTP / Route

3.2 server framework

Do not re-create the wheel, learning to build a framework for better and faster application

• Node.js (Express, Koa, Adonis)
• Python(Django, Flask)
• PHP(Laravel, Symfony)
• C# (ASP.NET)

3.3 Database

The vast majority of applications that will use the database, here are some options:

• Relational databases (MySQL, PostgreSQL, MS SQL)
• Non-relational database (MongoDB, Counchbase)
• Cloud services (Firebase, AWS, Azure, DocumentDB)
• Lightweight (SQLite, NeDB, Redis)

3.4 server-side rendering

Like React, Vue and Angular peer server rack can be rendered

• Next.js(React)
• Nuxt (View)
• Universal angle (angle)

3.5 Content Management System

Content management systems enable rapid development and provide the ability to update content for your customers when you need to quickly develop the site, they are very suitable, especially for a free developer.

• PHP-based (WordPress, Drupal)
• Based on the JS (Ghost, Keystone)
• Python-based (Mezzazine)
• .Net-based (Piranha, Orchard CMS)

3.6 DevOps and deployment

Learn the language and framework is one thing, but the installation environment, test and deploy something another matter

• Deployment (Linux, SSH, Git, Nginx, Apache)
• Flatbed (Digital Ocean, AWS, Heroku, Azure)
• Visualization (Docker, Vagrant)
• Test (unit testing, integration testing, functional testing, system testing)

3.7 of engineers to meet the full stack conditions

• Setting up the development environment and workflow whole stack
• Construction of back-end services and micro-services API
• Database operations
• To independently develop applications (server and the front end)
• Deploy to the cloud (SSH, Git, Servers, etc.)

4.2019 and other technology trends

4.1 Native Application Development

• React Native (using React build native applications)
• NativeScirpt(Angular, Typescript, JavaScript)
• Ionic (HTML / CSS / JS achieve mixing applications)
• Flutter (developed for Dart mobile native application side SDK)
• Xamarin (using the mobile terminal application developed in C #)

4.2 Electron develop desktop applications

Electron is a tool to build desktop applications using JavaScript cross-platform.

• Chromium to use the kernel and Node.js
• Compatible with Windows, Mac & Linux
• Crash reports, debugging and performance analysis

4.3 GraphQL & Apollo

GraphQl for one API revolutionary new method, query language much more stringent than the standard RESET

• Query only what you want
• Front and rear can work more smoothly
• And query very simple statement like JSON
• Apollo is a transmission request to the client GraphQL
• Using a static Gatsby Site Builder

4.4 TypeScript

TypeScript is a superset of JavaScript that adds static type, and many other features.

• Variables, functions and other types
• class
• Other characteristics of the ES6
• To be used in the Angular, but can also be used in the Vue and React

4.5 No service architecture

Without having to create and manage their own servers

• The third service execution using the "no server function"
• Such as AWS, Netify & Firebase
• Gatsby still very popular in Site Builder
• No Service Framework

4.6 AI and machine learning

AI and machine learning has been widely used in all procedures and techniques, and even web development.

• Machine learning can allow Web applications to adjust over time
• Although the AI ​​is still a long way to go, but we will see it used more in the web
• Although the vast majority are written in Python, but there are Tensorflow.js and Brain.js these JS libraries

4.7 Block chain technology

Many companies now use digital technology to block chain transaction, because they are more secure and efficient.

• Solidity (a smart contract programming language)
• Mist (Ethernet Square browser developed for sending transactions and contracts)
• Credits bit API (app may be constructed and the entire development chain block and currency bits)

4.8 WEIGHT

Progressive Web Apps is a web app, but a technology to bring native application experience to the user in function and style.

• Responsive
• In the offline environment is also able to provide services
• Similar interactions App
• HTTPS
• Reliable, fast, better

4.9 Web Assembly

Similar compiled binary format code can be executed browser. You can use a similar C / c ++ and Rust and other high-level language to write.

• Faster than the JavaScript execution efficiency
• Safer - Force browser homologous and security protocols
• Open & debug

Reproduced in: https: //www.cnblogs.com/mokeycode/p/10499743.html