2019-12-10 added: Some people say headline party, some people say I do not know what 2020 chaos into what. To emphasize the background again, this is a condensed Chinese version of a YouTube video by Brad traversy. If English is available, you can check out the English video. The authors intention is also introduce related aspects of web development comprehensive, and involves some of the future trends, such as some trends of 3 big framework and webassembly trend of speech recognition, to framework, and so on, video also considered the beginners of web development, gives some preliminary study direction and must learn the basic knowledge and so on.

We hope to discuss technology objectively and reduce unnecessary consumption.

update

2019-12-10 None Server Architecture Added the description “cloud functions” and the corresponding English.

The following is the original text.

start 2019-12-08 14:30:00

The statement

First of all, this article belongs to the Internet content summary and transfer, plus some personal understanding, if there is infringement, please contact me, will be appropriate to adjust.

Source: www.youtube.com/watch?v=0pT…

Web Development In 2020 – A Practical Guide

The text start

Why to have this article (video), is to give the majority of front-end not entry or just have a macro understanding of front-end development can do what, what development path, as soon as possible to find their own direction, do know.

What do you want to do?

The starting point of programming is very important, which is why are you programming?

  • work
  • freelancer
  • As a consultant
  • Create an app or service to make money
  • Just as a hobby

Just as a hobby I’m afraid is the rich second generation do things, most people are needed for work.

Toolbox 1: Essentials

  • Computer/operating system Mac, Windows, Linux
  • Editors VScode, Sublime, Visual Studio, Eclipse
  • Browser Chrome, Firefox
  • Terminal bash, Powershell, Git bash, iTerm, Hyper
  • Design (optional) Adobe Series, Sketch, Figma

Things to complete, first of all, the guy to have a computer, a desktop or laptop personal situation, the authors recommend is MAC, the reason is that the developer is friendly and convenient to use, some only MAC versions of the software, such as the sketch, my view is, of course, use Linux as a development of the computer do not have what problem, closer to the server deployment environment.

Editor, as a web development, the first vscode, of course, there are also discussions on the market vim and XXX war long, my understanding is that vim is a mode of editing, vscode is ide, the two and there is no direct conflict, can master.

Browser, preferred Chrome, Firefox market share is very low, except individual preferences.

Terminal, this nothing to say, like, familiar with which, do not pick.

Designing software may be important for freelancers, but the Adobe series is king.

HTML & CSS

As a front-end developer, HTML and CSS are fundamental and must be mastered at any level.

  • HTML5 (semantics, attributes, document types, etc.)
  • CSS basics (colors, fonts, positioning, box models)
  • CSS raster and Flex layout
  • CSS Custom attributes
  • CSS animations

Agree, the model of this aspect is Zhang Xinxu, if you have questions about CSS or HTML, as long as you search zhang’s blog, basically 95% of the questions can be found the answer, this is professional ah. CSS is evolving with The Times, and every now and then you have to look back and learn things that you didn’t know or weren’t familiar with before. As a beginner, it is best to learn these two basics thoroughly.

Responsive layout

As a modern web project, responsive layout ability has become a basic requirement for developers. Don’t say much.

  • viewport
  • Media queries
  • Flow width
  • Rem system of units
  • Mobile first

Let’s take a look at responsive layout from the above aspects, and then do some examples to familiarize ourselves with it. It shouldn’t be too difficult. Note that the unit in the applet is RPX (if I remember correctly).

Customize reusable CSS components

Create your own modules and become proficient with your own reusable CSS components.

Sass can look into that.

  • variational
  • Nested definitions
  • Conditions defined

Learn more about PostCSS here, of course, based on your project needs. Sass, less, stylus, etc.

CSS framework

CSS frameworks are particularly numerous

  • bootstrap
  • tailwind CSS
  • materialize
  • bulma

I’m sorry, I know bootstrap is famous, and I know a lot about semantic UI, so if you go to the CSS Framework, you’ll see a lot. There’s also a new tailwind CSS framework that doesn’t provide tailwind components. It feels like those frameworks do too much, but instead gives you the ability to customize your own framework.

Native JavaScript

JavaScript is the language used by browsers and a core skill that web developers must master to make your pages move.

  • Basics (variables, data types, functions, conditional statements, etc.)
  • DOM (Document Object Model)
  • JSON (too lazy to translate)
  • Fetch API (Request/response /Ajax)
  • Modern JS (ES6)

Whether vue, React, oR typescript, it all comes back to JavaScript, so if you are a beginner, you still need to have a solid foundation in JavaScript. You need to know more about native JavaScript syntax and features. The framework is based on a set of basic ideas. Each has its own strengths, and in recent years there has even been an anti-framing movement that presupposes business goals. ES6 standard, see ruan teacher’s tutorial to learn.

A fifth of a division line

The toolkit 2

Here are some of the things that front-end developers have in another toolbox.

  • git & github
  • Browser developer tools
  • Editor Extension
  • emmet
  • npm/yarn
  • axios
  • webpack/parcel

Recent developers are in the best of times, far away from FTP, SVN, git and Github, as long as you master the basic use of git, you can live a good life, spare time to familiarize yourself with git bash, master the basic Git operations.

Proficient in browser developer tools, Chrome developer tools can, have the power to follow up chrome each version update changes, keep the knowledge fresh, can also be used as a good conversation with ha.

Editor extensions, vscode or other modern editors, their own functions are basically enough, but there are still some personalized needs, in the form of extensions to meet, try some predecessors feel good extensions, but also do not be too greedy, machine configuration is not good, just leave the necessary extensions enough.

Emmet is an HTML aid tool. I don’t know why the author highlights this.

NPM/YARN This as a Web development, to have the awareness of full stack development, NPM package is a sea, a galaxy, or even a black hole, good things still need to be panned out. Yarn personally thinks no need is ok. The NPM CI is almost sufficient.

Axios is a very popular library for beginners to use, but it’s important for the browser to fetch data from a background service.

Packaging tools, from simple use to skilled configuration, finally master the principle, improve packaging efficiency, bridge in water. Parcel, which claims to perform better than WebPack, is worth checking out for those who can afford it.

Release basis

Web development should master some basic publishing skills.

  • Domain name registration (Namecheap, Google Domains, etc.)
  • Host management (InMotion, Hostgator, Bluehost, etc.)
  • Static host Services (Netlify, Github Pages)
  • SSL certificate
  • FTP/SFTP
  • SSH
  • CLI & GIT

For students from large factories, the work published is basically done by the operation and maintenance students. However, for small and medium-sized enterprises, many of them may need to operate by themselves. The skills here are not too difficult. For example, domain name registration, Tencent cloud, Ali cloud have provided the corresponding services, host management knowledge is big, the choice of Ali cloud, Tencent cloud, all kinds of cloud, foreign choice is also choose eye. This can only be done by experience. Recently foreign competition about virtual host VPS is very fierce, basically provide free 1 year, 200, 300 dollars free amount, you can try more.

Github + Netlify is also a good choice for those who want to experience automated deployment.

SSL certificate, letsencrypt is recommended to translate letsencrypt into Chinese, although long but easy to remember. Letsencrypt is the best choice for HTTPS in many environments.

FTP/SFTP is not much, SSH and basic CLI command line operations will be covered in the cloud host section later, these knowledge will be gradually understood.

Basic front-end development skills

Putting this knowledge together, a front-end developer has the following capabilities.

  • Build sites for individuals or small businesses
  • Good mobile layout
  • Create CSS animations and effects
  • Be familiar with a CSS framework
  • Create a dynamic page
  • Create a small client application using JavaScript
  • Proficient in browser developer tools
  • Proficient in version control
  • Publish and maintain small projects

I don’t want to add anything. It’s easy

What’s next? Two ways (forward or backward)

You will then be presented with two options, each for a different learning path.

  • Continue with front-end development (React, Vue, Angular)
  • Server-side languages (PHP, Python, C#, Go, etc.)

As can be seen from the author’s description, front-end development has no good choice, only three ways, server side has a etc., which means that the choice is much more. Who said that the front end is all bells and whistles, nothing to do with a new thing, in fact, server-side language is a hundred flowers, or the name of the solution to different problems, there is no debate, continue to move on.

Front-end development framework (choose one of three)

The front-end development framework allows you to quickly build powerful single-page applications with a unified interactive UI

  • React remains the most popular framework, with medium learning difficulty
  • Vue is the easiest to learn as it continues to grow
  • Angular is more used in enterprise development and has a steep learning curve

I only know a little about React and Vue. Here, you can search the requirements for front-end positions in various small and medium-sized companies. Generally speaking, Vue is quite popular in China, and React is also widely used in large companies.

Svelte

  • Write less code
  • No virtual DOM
  • Very fast

What the author really likes, and I didn’t know much about it before, is to de-frame and create some code in native JavaScript. It is recommended to try the following for small projects and individual projects.

State management

Most large applications use third-party state management libraries, but use them sparingly.

  • React – Redux, Context API with Hooks
  • Vue -Vuex
  • Angular – NGRX, Services
  • Apollo Client

React and Angular already have alternatives to state management tools, so use them sparingly. Occam’s razor is here to stay.

Two fifths

Server-side rendering (SS-R)

Use NEXT(React) and NUXT(Vue) for server-side rendering

  • Better – search – search – engine – optimization
  • Text – piece – system – system – road – by
  • Station-state-derivate-out
  • C-s-s is written in JS

Static Site Generation (SSG)

Use Gatsby(React) and Gridsome(Vue) to build static sites.

  • Better search engine optimization
  • File system Routing
  • Get the data from a local file at build time
  • Plug-in system
  • GraphQL gets the data

The new blog is built on Gatsby, while hexo used to be. Static site generation is a trend, and it is also a good choice for developers who want to build personal sites or small business promotion sites on the Internet. The page can be opened quickly and maintained easily. But as we’ll see later, with content management systems, you get twice the result with half the effort.

TypeScript

  • Static typing (variables, functions, etc.)
  • Tool support
  • Modules, modifiers, classes
  • Compile to clean JS code

Unfortunately, AS a lazy person, I have been saying that I want to learn TS, but I still haven’t learned it systematically. With the general trend, TS is still worth spending some time to learn, if I want to continue to develop in the direction of forward development. After all, Microsoft dad’s son is still very strong.

Summary SHIKE: Front-end path diagram

  • Proficiency in a front-end framework
  • Create some high-level front-end applications/interfaces
  • Smooth front-end development process
  • Good at interacting with background apis
  • Skilled in managing application and component state
  • JIAFEN item: Server-side rendering (S-S-R)/JINGTAI site SHENGCHENG (S-S-G)

CHUILIAN is basically a front-end developer of ZHONGJI. Below we need to render a MUBIAO of full stack developers.

Server side language (select one of many)

To become a full-stack developer or backend developer, you need to learn server-side programming languages and server technologies

  • Node.js
  • Python
  • PHP
  • C#
  • Ruby
  • GoLang
  • Java
  • Rust

Node.js is the best choice for front-end developers to start. I have used PHP and Python for some time as my personal interests. Scripting languages are basically the same. To go further, of course, you must have a deeper understanding of server-side technologies, CPU, memory, process management, and so on. On the other hand, if you are interested in Web Assembly, Rust is a good choice.

Server side framework (choose one)

  • Node.js – Express, Koa, Adonis, Feathers.js, Nest.js
  • PHP – Laravel, Symfony, Slim
  • Python – Django, Flask
  • C# – ASP.NET MVC
  • Java – Spring MVC, Grails
  • Ruby – Ruby On Rails, Sinatra
  • Go -Reval

If you want to choose one, I recommend following this principle: people, business, technology, make sure that two of the indicators are mature and familiar to you. In other words, never choose a new technology in a business area you are not familiar with. It is dead. If you are not familiar with the developer of the project, go back and get a long rope. Those frames that say above, domestic use circumstance and abroad still have a few different actually, specific circumstance is specific analysis.

Three fifths dividing line

Database (choose one of many)

Most applications need a place to store data, and the choice of database is varied.

  • Relational databases – PostgreSQL, MySQL, MS SQL
  • NoSQL – MongoDB, PethinkDB, CouchDB
  • Cloud Database – Firebase, Azure Cloud DB, AWS
  • Lightweight & Cache classes – Redis, SQLite, NeDB

Incidental learning: SQL, ORM, ODM, etc

The choice of database is also diverse, mainly divided into relational and other. No matter what kind of database you choose, back up! Backup! Backup! Must be the first thing to consider, the painful experience of losing data is like Murphy’s law, I haven’t met many people.

GraphQL

GraphQL is a query language API standard

  • A single endpoint
  • Simple syntax, similar to JSON
  • Easy to implement
  • Apollo

Facebook’s data access protocol, which has been around for a few years, is still a trend for a variety of reasons and resistance, and it looks good. Not much said.

Content management system

Content management systems are mainly systems for non-developers to update the content of the site.

  • Traditional content management systems – WordPress, Drupal, Keystone, Enduro
  • Interface – Contentful, Prismic. IO, Sanity, Strapi

This is divided into the traditional human-oriented and the new machine-oriented, or API-oriented, static site-generation tools combined with an interface free content management system that offers infinite possibilities for displaying interfaces.

The release and the conversation

Understand how to create and manage environments and publish to the network

  • SSH(Secure Shell)
  • Web server environment – Nginx, Apache
  • Application hosting Providers – Linode, Heroku, AWS, Azure, Now
  • Virtualization – Docker, Vagrant
  • Testing – unit testing, functional testing, integration testing, etc
  • Load balancing, monitoring, security, etc

In fact, this is the most content, covering all aspects of release and development operations cooperation, which is an area where front-end developers need to strengthen their capabilities. Each topic is a big one, so decide your priorities according to your situation.

Four fifths

The whole development of the stack

With that in mind, you’re basically a full-stack developer, and you can now create some powerful, data-driven Web applications.

  • Use familiar front-end technologies to build user interfaces
  • Proficient in server-side languages and frameworks
  • Environment skilled configuration, smooth development process
  • Skilled in creating backend applications, apis, microservices, etc
  • Familiar with database operation, SQL, ORM technology
  • Release products online (SSH, Git, cloud, etc.)

This is a full stack developer, not to mention the technical content of what, need to master a lot of skills. Let’s see what else you can do once you become a full-stack developer.

Mobile development (choose one)

As Web developers continue to expand their reach into mobile apps, the shadowless hand unfolds and the technology stack to choose from is vast.

  • Flutter – Google provides the SDK to build native apps. Using the Dart language
  • React Native – Use the React framework to build Native apps
  • NativeScript – Build native apps using JS, TS, Angular, or Vue
  • Ionic – Uses JS to build hybrid mobile apps
  • Xamarin – use C# to build native applications

Front-end development finally no longer meets the needs of Web applications, and extends its hand to native apps. Not much to be said.

PWA: Progressive Web applications

PWA is a regular Web application, but it feels like a native application and has a better experience.

  • Works well in different sizes
  • Partially functioning when offline (Service Worker)
  • Can be installed
  • Start the interface
  • Must be HTTPS
  • Reliable, fast, excellent

To be honest, in addition to reaching out the devil’s hand to the terminal, there are some other learning fields in the Web application. For example, PWA here, although it seems that offline operation is a gimmick, you can learn how to use the Service Worker, which has its own specific use scenarios. Figure it out.

Desktop application domain Electron

With Electron, we can create cross-platform desktop applications based on the JavaScript language.

  • Use Node.js and Chromium
  • Data security
  • A high performance
  • Easy to use
  • Mature products: VScode, Atom, Postman, Discord

There’s another place for web apps, desktop apps, and so far the head players have basically locked onto Electron.

JAMstack

“Javascript, APIs & Markup” is a pure front-end technology stack that uses JS, APIs and some Markup languages to build applications. It is a modern Web development architecture.

  • There are no restrictions on frameworks and libraries
  • The site serves in the form of static pages that are generated using some static site generator
  • High performance, generated at release time
  • Cheap, very easy to scale
  • Easy to deploy

Of course, each of these development architectures depends on the specific project. It’s good to know.

No service architecture/cloud function Serverless

You don’t really need to have your own server architecture

  • “Background” or “function” as a service (FaaS)
  • Reduce complexity and overhead
  • Manage less infrastructure
  • AWS Lambda and Netlify

Those of you who have developed applets may have a better understanding of cloud functions. The technical key points here are basically the reverse of full-stack development, the web is more forward transformation, and the task of server management relies on third-party service providers to provide, which is more suitable for small and medium-sized projects.

API first design

As the Internet of Things becomes more popular, apI-first design approaches are becoming more common.

  • Traditionally, we design the UI first, and then the background
  • API design first, we design the API first, and then build different interfaces based on that

This is also a big trend, API first. Then mobile, PC, TV, pad, and so on.

Machine learning /AI

Machine learning and AI are widely used in different fields and can be combined with Web applications/services.

  • Mention regular data mining
  • Reducing security Threats
  • Machine learning API
  • To make content
  • AIDS in learning human behavior
  • Etc etc.

I said, no deeper insight.

Speech recognition

Speech recognition is a major trend after 2020.

  • HTML5 Web Speech API
  • Google Speech-To-Text
  • The man-machine dialogue

Speech recognition still needs a specific use scenario for the front-end to play. The API of domestic big factory is very good for Chinese recognition. Baidu, Tencent And So on.

Web Assembly

A bytecode program running in a browser

  • Written in C, C++, and Rust
  • It’s much faster than JavaScript
  • Not a replacement for JavaScript, but a partner to work with

JavaScript is the boss and tells Web Assembly what to do. This combination gives us a way to run large video editing tools, games, and so on in a Web browser.

Summarize the

Don’t be intimidated by a lot of stuff and jargon, do some research and find out what it is that you want to do, and choose the skills that you want to learn and the different routes you want to take. The more you learn, the easier it becomes.

These are the basic, for domestic Web developers, the development of various small programs is also a major topic, wechat, Alipay and other giants, after all, domestic developers can not get around the mountain ha.

end 2019-12-08 17:18

This afternoon is the second time to watch this video, by the way, translation and share, if you have different views, welcome to the original author there.