前端开发如何学习?后端?全栈?零基础入门

这是一个2019年你成为前端,后端或全栈开发者的进阶指南:

1、你不需要学习所有的技术成为一个web开发者

2、这个指南只是通过简单分类列出了技术选项

3、我将从我的经验和参考中给出建议

4、首选我们会介绍通用的知识, 最后介绍2019年的Web的一些趋势

1、基础前端开发者

1.1 HTML & CSS

最基础的知识:

  • 语义化的HTML元素
  • 基础的CSS语法
  • Flexbox & Grid
  • CSS变量
  • 浏览器开发者工具

1.2 响应式布局

响应式设计将不再是网页的加分项, 而是必须的

  • 设置viewport
  • 非固定宽度
  • 媒体查询
  • 使用 rem 替代 px
  • 移动优先,柱状显示

1.3 基础的部署工作


学会如何部署一个静态网站到服务器

  • 注册一个域名(NameCheap, Google Domains)
  • 管理共享主机或虚拟机(Inmotion, Hostgator, Bluehost)
  • FTP, SFTP 文件上传(Filezilla, Cyberduck)
  • 静态页面托管(Netlify, Github Pages)

1.4 SASS预处理器

虽然不是必须的, 但是推荐去学, 基础知识的掌握很简单

  • 结构化CSS
  • 变量
  • 嵌套样式表
  • Minxins & 函数
  • 继承

1.5 原生JavaScript语法

不使用任何框架和库区学习原生的JS语法

  • 数据类型, 函数, 条件判断, 循环, 凑总府
  • DOM操作和事件
  • JSON
  • Fetch
  • ES6+(箭头函数, Promise, async/await, 解构)

1.6 满足了基本的前端开发者的条件

  • 构建静态站点
  • 构建UI布局(拿到设计图能够使用HTML/CSS还原)
  • 添加一些交互功能
  • 部署和维护网站

现在能找到最低水平的Web开发工作, 但是这是远远不够的....

2、一个成熟的前端开发者

2.1 HTML & CSS框架

HTML/CSS框架目前没有以前那么有意义, 但是我还是介意你选择一个学习(这里作者想隐射的应该是, 在jquery时代, HTML/CSS框架的学习是必须的).

  • BootStrap
  • Materialize
  • Bulma

2.2 Git和其他工作流工具

Git绝对是每一个Web开发者必须掌握的工具, 这里也有一些其他的工作流工具的建议.,

  • 基础的命令行( touch, cd, mkdir什么的总得会, 命令行在下面的工具中都会用到)
  • Git(版本控制)
  • NPM 或 Yarn(包管理)
  • Webpack 或者 Parcel(打包工具)
  • Gulp 或者 Grunt(任务管理和构建工具)
  • 编辑器插件(ESLint, Prettier, Live Server等)

2.3 前端框架

学习一个前端框架在目前前端开发中是必须的.

  • 在大公司开发中非常流行
  • 更多的交互 & 有趣的UI组件
  • 组件化 & 模块化前端代码
  • 对团队有利

2.4 状态管理

对于使用框架的大型前端项目, 你也许需要使用状态管理工具去管理你的应用级的状态

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

2.5 满足一个成熟的前端开发者条件

  • 构建一个优秀的前端应用
  • 流畅和稳定的前端工作流
  • 多人开发 & 熟练使用Git
  • 请求后端API & 前端数据响应

满足以上条件, 你能够顺利的找到一个前端的工作并干得很出色~

3、全栈开发工程师

3.1 学习一门后端语言

成为一个全栈工程师或软件工程师, 你将需要学习一个服务端语言和相关技术

学习的顺序:

  • 基础的后端语言语法
  • 数据结构和工作流
  • 包管理
  • HTTP/路由

3.2 服务端框架

不要重复造轮子, 学习一门框架去构建更好和更快的应用

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

3.3 数据库

绝大多数觉得应用都会使用到数据库, 这里有一些选择:

  • 关系型数据库(MySQL, PostgreSQL, MS SQL)
  • 非关系型数据库 (MongoDB, Counchbase)
  • 云服务 (Firebase, AWS, Azure, DocumentDB)
  • 轻量级(SQLite, NeDB, Redis)

3.4 服务端渲染

像React, Vue 和 Angular等端架都可以进行服务端渲染

  • Next.js(React)
  • Nuxt(Vue)
  • Angular Universal(Angular)

3.5 内容管理系统

内容管理系统允许快速开发并为您的客户提供更新内容的能力. 在你需要快速开发网站的时候, 它们是很适合的. 特别是对于自由开发者.

  • 基于PHP的 (Wordpress, Drupal)
  • 基于JS的 (Ghost, Keystone)
  • 基于Python的 (Mezzazine)
  • 基于.Net的 (Piranha, Orchard CMS)

3.6 DevOps 和部署


学习语言和框架是一回事, 但是安装环境, 测试和部署有事另外一回事

  • 部署 (Linux, SSH, Git, Nginx, Apache)
  • 平台 (Digital Ocean, AWS, Heroku, Azure)
  • 可视化(Docker, Vagrant)
  • 测试 (单元测试, 集成测试, 函数式测试, 系统测试)

3.7 满足全栈工程师的条件

  • 设置全栈的开发环境和工作流
  • 构建后端服务API和微服务
  • 数据库操作
  • 能够独立开发应用(前端和服务端)
  • 部署到云端(SSH, Git, Servers等等)

4、2019技术趋势和其他

4.1 原生应用开发

  • React Native(使用React构建原生应用)
  • NativeScirpt(Angular, Typescript, JavaScript)
  • Ionic (HTML/CSS/JS 实现混合应用)
  • Flutter (使用Dart语言开发原生应用的移动端SDK)
  • Xamarin (使用C#开发的移动端应用)

4.2 使用Electron开发桌面应用

Electron是一个使用JavaScript构建跨平台的桌面应用工具.

  • 使用到了 Chromium内核和Node.js
  • 兼容Windows, Mac & Linux
  • 崩溃报告, 调试和性能分析

4.3 GraphQL & Apollo

GraphQl是对于API的一种革命性新方法,查询语言比标准RESET严格得多

  • 只查询你想要的东西
  • 前端和后端可以合作得更为顺利
  • 查询语句非常简单且很像JSON语句
  • Apollo是一个发送请求到GraphQL的客户端
  • 使用的是Gatsby静态站点生成器

4.4 TypeScript

TypeScript是一个JavaScript的超集, 它添加了静态类型等很多特性.

  • 变量, 函数等类型
  • 其他ES6的特性
  • 在Angular中被使用到, 同时也可以在React和Vue中被使用

4.5 无服务架构

无需创建和管理自己的服务器

  • 使用第三服务执行“无服务器功能”
  • 例如 AWS, Netify & Firebase
  • 在Gatsby静态站点生成器很流行
  • 无服务框架

4.6 AI和机器学习

AI和机器学习已经被广泛应用在所有的程序和技术中, 甚至包括web开发中.

  • 机器学习可以允许Web应用程序随时间进行调整
  • 虽然AI还有很长的路要走, 但是我们会看到它会更多的用在web中
  • 虽然目前绝大多数都是Python写的, 但也有Tensorflow.js和Brain.js这些JS的库

4.7 区块链技术

现在许多公司使用区块链技术进行数字交易, 因为它们更安全和有效率.

  • Solidity(一门智能合约的编程语言)
  • Mist(以太坊开发的浏览器, 用于发送交易和合约)
  • 比特币API(可以构建app和整和比特币的区块链开发)

4.8 PWA


Progressive Web Apps是一个web app但是在功能和样式上给用户带来原生应用使用体验的一项技术.

  • 响应式
  • 在离线环境下也能够提供服务
  • 类似App的交互
  • HTTPS
  • 可靠, 迅速, 更好

4.9 Web Assembly

类似汇编的二进制格式的代码可以被浏览器执行. 可以使用类似C/c++和Rust等高级语言进行编写.

  • 比JavaScript执行效率快
  • 更安全 - 强制的浏览器同源和安全协议
  • 开放 & 可调试

自己是一个五年的前端工程师

这里推荐一下我的前端学习交流群:731771211,里面都是学习前端的从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴。2019最新技术,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!

点击:加入

原文地址:https://blog.51cto.com/14284898/2396757

时间: 2024-10-14 06:14:06

前端开发如何学习?后端?全栈?零基础入门的相关文章

大牛整理最全Python零基础入门学习资料

大牛整理最全Python零基础入门学习资料 0 发布时间:『 2017-11-12 11:56 』     帖子类别:『人工智能』  阅读次数:3504 (本文『大牛整理最全Python零基础入门学习资料』的责任编辑:老王) 摘要:大牛整理最全Python零基础入门学习资料 Python数据类型--数字 Python Number 数据类型用于存储数值. 数据类型是不允许改变的,这就意味着如果改变 Number 数据类型的值,将重新分配内存空间. var1 = 1 var2 = 10 您也可以使

Vue2.5开发去哪儿网App 从零基础入门到实战项目

第1章 课程介绍 本章主要介绍课程的知识大纲,学习前提,讲授方式及预期收获. 第2章 Vue 起步 本章将快速讲解部分 Vue 基础语法,通过 TodoList 功能的编写,在熟悉基础语法的基础上,扩展解析 MVVM 模式及前端组件化的概念及优势. 第3章 Vue 基础精讲 本章通过精挑细选的案例,精讲 Vue 中的基础知识,包括实例.生命周期.指令.计算属性.方法.侦听器,表单等部分内容. 第4章 深入理解 Vue 组件 本章将深入讲解 Vue 组件使用的细节点,从父子组件的参数传递及校验入手

零基础入门jQuery最新版开发.NET富客户端应用视频下载

jQuery是继Prototype之后又一个优秀的JavaScript库,其凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax的操作.且其独特而又优雅的代码风格改变了Javascript程序员的设计思路和编写程序的方式.另jQuery还具有轻量级.强大的选择器,出色的DOM操作封装.可靠的事件处理机制.完善的Ajax.不污染顶级变量.出色的浏览器兼容性.链式操作方式.隐式迭代.行为层与结构层分离.丰富的插件支持.

(转)零基础入门深度学习(6) - 长短时记忆网络(LSTM)

无论即将到来的是大数据时代还是人工智能时代,亦或是传统行业使用人工智能在云上处理大数据的时代,作为一个有理想有追求的程序员,不懂深度学习(Deep Learning)这个超热的技术,会不会感觉马上就out了?现在救命稻草来了,<零基础入门深度学习>系列文章旨在讲帮助爱编程的你从零基础达到入门级水平.零基础意味着你不需要太多的数学知识,只要会写程序就行了,没错,这是专门为程序员写的文章.虽然文中会有很多公式你也许看不懂,但同时也会有更多的代码,程序员的你一定能看懂的(我周围是一群狂热的Clean

前端开发知识学习概要

前端开发工具 编辑器 editPlus sublime 浏览器: Chrome Safari Firebox IE 插件:firebug chrome: inspect element html 组成结构 1 <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前,不是 HTML 标签: 2 它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令, 浏览器读取. 3 <html> 4 <head> 5 描述页面

web前端开发怎么样学习?看这份web前端学习路线

前端开发是创建Web页面或app等前端界面呈现给用户的过程.前端开发通过HTML,CSS及JavaScript以及衍生出来的各种技术.框架.解决方案,来实现互联网产品的用户界面交互.它从网页制作演变而来,名称上有很明显的时代特征.在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主.随着互联网技术的发展和HTML5.CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大. 随着时代的发展,现在从事IT方向的人有很

JAVA学习_零基础学习JAVA方法_零基础学习JAVA思路

在学习JAVA前,对于一个真正初学者(也就是从零开始学习JAVA人员)的一个问题:什么是JAVA,然后才是怎么学习JAVA?JAVA是sun microsystems在1995年推出的高级编程语言,其分为Java SE.Java EE.Java ME三大体系,而JAVA SE是JAVA的基础,继JAVASE之后是JAVAEE,JAVA ME.JAVASE是JAVAEE的基础,Servlet.JSP是框架的基础.数据库方面个人建议学习oracle,当然其它的像 MySQL,MSSQL,都可以,只要

html5该怎么样学习?零基础入门HTML5学习路线

纵观近几年HTML5的发展可以看出,HTML5开发持续上涨,腾讯.微软.谷歌等国际互联网企业都将HTML5的研发与使用放在了重要的地位.目前全球有超过十亿台手机浏览器支持HTML5,而微信小程序的开放,更是引爆了HTML5的开发浪潮.大量的HTML5游戏风靡全球,也充分体现了HTML5良好的发展势头. 有调查数据显示,高达83.27%的用户认为HTML5技术是大势所趋.而随着互联网时代的到来,使得HTML5的发展前景愈发的明朗,同样也增加了诸多企业对于HTML5高端人才的需求量. 目前,已经有越

大数据系统学习零基础入门到精通加项目实战2017最新全套视频教程

38套大数据,云计算,架构,数据分析师,Hadoop,Spark,Storm,Kafka,人工智能,机器学习,深度学习,项目实战视频教程 视频课程包含: 38套大数据和人工智能精品高级课包含:大数据,云计算,架构,数据挖掘实战,实时推荐系统实战,电视收视率项目实战,实时流统计项目实战,离线电商分析项目实战,Spark大型项目实战用户分析,智能客户系统项目实战,Linux基础,Hadoop,Spark,Storm,Docker,Mapreduce,Kafka,Flume,OpenStack,Hiv

2019刘老师教你用springboot2.x开发整合微信支付的线上教育平台带源码送springboot2.x零基础入门到高级实战教程

第一部分:springboot2.x零基础入门到高级实战教程一.零基础快速入门SpringBoot2.0 1.SpringBoot2.x课程全套介绍和高手系列知识点 简介:介绍SpringBoot2.x课程大纲章节 java基础,jdk环境,maven基础 2.SpringBoot2.x依赖环境和版本新特性说明 简介:讲解新版本依赖环境和springboot2新特性概述 3.快速创建SpringBoot2.x应用之手工创建web应用 简介:使用Maven手工创建SpringBoot2.x应用 4