2020年前端学习体系与前端概述

前端学习目标

基础课程:HTML + CSS javaScript DOM BOM AJAX HTML5 + CSS3

应用课程:jQuery easyUI 移动端开发 响应式开发 PHP基础 H5UI bootstrap less/stylus 模板引擎 swiper iscroll select2

工程课程:ES5/6/7 git&GitHub nodeJS mongoDB mySQL webpack gulp babel VUE 微信小程序 REACT

学习前端所需要用到的工具

欲善其事必先利器,工具花样不在多,重点在人的技术本身。

最简化工具有 chrome浏览器、 editplus编辑器、pxCook量图器。后续随着课程推进,会慢慢介绍各种辅助工具,在这里就罗列,以免干扰新手小白。

浏览器

浏览器是网页的载体,是咱们前端工程师的主战场。浏览器常用的有 IE系列、火狐(FireFox)、谷歌(chrome)、Safari(苹果)、Opera等

浏览器市场份额

在2020年,浏览器的霸主地位已经确立,Chrome凭借超简约的界面以及强大的扩展性夺得宝座,当然少不了国内浏览器大量使用chromium内核带来的二次推广的贡献

查看网站 : https://tongji.baidu.com/research/site

开发工具

开发工具很多,用什么开发工具取决于你的个人喜好和业务所需平台。好的开发工具能够提升你的效率,但是无法提升你的技术实力。

协助工具

除了写代码的工具之外,我们还需要一些其他辅助类型的工具帮助我们更好的完成项目内容。比如 切图工具 量图工具 数据监测工具 代码管理工具等等, 当前我们只需要掌握PS和pxCook的使用。

前端全面技术构成

大体分为:状态管理、UI 组件、小程序、跨平台、框架层、编程语言、工程化、监控、测试和服务端。

网页&前端

网页是构成网站的基础单元,是承载各种网站应用的平台。通俗地说,您每天通过浏览器甚至部分APP上网冲浪所看到的就是网页,网页主要由文字、图像、超链接、文本、多媒体等元素构成。

前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及javaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。虽然现在前端技术栈百花齐放衍生出各种 工具 概念 技术 ;在工程化与现代化的路上高歌猛进,但本质上还是做网页。就跟我们能源技术发展到了核能阶段,依然只是为了“烧开水“。

WEB前端发展史

1991年8月6日 历史上第一个网页诞生了 互联网之父 蒂姆·伯纳斯·李 在alt.hypertext新闻组上贴了万维网项目简介的文章,这就是第一个运行在浏览器上的网页。

1994年可以看做前端历史的起点,这一年10月13日网景推出了第一版Navigator;这一年,Tim Berners-Lee创建了W3C;这一年,Tim的基友发布了CSS。还是这一年,为动态web网页设计的服务端脚本PHP以及笔者本人诞生。

随着网页从学术机构走向公众社会,网页承载的功能便超出了学术范围而变得愈加丰富,因此早期网页的局限性也逐渐显露出来。网页的早期形态和Document一样,完全基于HTML页面,并且所有内容都是静态的。

  1. 所有的网页都基于HTML页面,因为没有任何手段可以控制局部内容的显示和隐藏,因此任何局部的变化哪怕只多出一个标点符号,都只能重新下载一个新的页面。
  2. 计算任务只能在服务端实现。由于网速限制,与服务器通信的过程是非常缓慢的,并且此过程是同步阻塞的,于是会出现这样的场景:用户提交一个表单,然后整个页面消失,浏览器呈现白屏,经过漫长的等待,浏览器渲染出一个和之前一模一样的页面,只不过输入框旁边多了一排红色小字:用户名错误。
  3. 所有页面都是静态的,这意味着一个电商网站有一千种商品,哪怕页面布局一模一样,也必须写一千个单独的页面。
· 1995年网景推出了JavaScript,实现了客户端的计算任务(如表单验证), 看起来像是玩具的脚本语言。

· 1997年,以JavaScript1.1为蓝本的建议被提交给了欧洲计算机制造商协会(ECMA,European Computer Manufactures Association)该协会指定39号技术委员会负责将其进行标准化。
· 2006年,XMLHttpRequest被W3C正式纳入标准。John Resig发布了jQuery。
· 2008年问世的谷歌V8引擎改变了这一局面。现代浏览器的崛起终结了微软的垄断时代!
· 2009年AngularJS诞生,随后被谷歌收购。
· 2009年Ryan Dahl发布了NODE,新的时代在这一天悄然开启。
· 2010年backbone.js诞生。
· 2011年React和Ember诞生。
· 2014年,第五代HTML标准发布。2014年Vue.js诞生, 前端进入了新时代。

当下

如今前端工程已经不再是角落里的小可怜,在最新2019年的GitHub的数据统计中显示 前端的主力语言 javaScript 早已稳稳的拿下了最受欢迎(使用最多)的语言排行榜 第一


未来

随着5G的到来以及Web APP基于浏览器拥有跨平台的天然优势,开发周期,开发成本,维护成本全面下降,传统Native App面临严峻挑战。Geolocation API、Vibration API、Luminosity API、Orientation API、Camera API、Hybrid、nw.js、Electron、react native、weex如雨后春笋一般,只要你能看到的领域。我们终将插足!

模块化、组件化、前后端分离、工程化、全栈开发、微服务。每天都有大量的开发者在为前端的发展做出贡献。

前端工程师的待遇和发展

初中级薪资待遇大概为: 1线城市 15K左右 2线城市 10k左右 三线城市8K左右 18线小城市 6-8k 在各行业横向对比也算是中等水平。

职业发展路线也广阔,你可以选择在一个业务领域深入耕耘,也可以选择全面提升技术栈深度和广度成为全栈工程师,先天条件比较好的可以深入架构研究 进行 算法 架构 AI 图形等领域拓展。也可以走技术管理路线,产品路线。记住一句话 技术只是敲门砖 想要有更多的收获必然要靠自己去打拼,坐吃山空不管什么行业都必然会被淘汰

原文地址:https://www.cnblogs.com/kyogre/p/12147419.html

时间: 2024-10-10 12:57:55

2020年前端学习体系与前端概述的相关文章

好程序员web前端学习路线分享前端基础面试题

好程序员web前端学习路线分享前端基础面试题,希望对大家有所帮助. 1.HTML语义化的理解? 答案:HTML语义化就是让页面的内容结构化,便于对浏览器.搜索引擎解析:在没有样式CSS的情况下也以一种文档格式显示,并且是容易阅读的:搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于SEO:使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解. 2.父元素透明,但是又不影响子元素的透明度怎么实现? 答案:方法一:用rgba 方法二:再加上一层与父元素同级的div装载子元素,定位到子元

前端知识体系(一)浏览器机制以及进程线程的关系

看了一篇大神的博客,对前端学习体系突然明悟了起来.于是准备参考着大神的脚步开始体系化的学习.博客链接:https://segmentfault.com/a/1190000013662126. 很多时候被问到从输入url地址之后,会发生什么?很多时候回答都很笼统,没有自己的核心,所以学习一下大神的思路,以下总结的只是骨干,只有将每一个部分都学习到,这样才是一个知识体系,才能很好的理解上下结构与关系. 1. 从浏览器接收url到开启网络请求线程(这一部分可以展开浏览器的机制以及进程与线程之间的关系)

2020年小白学习web前端应该知道的学习路线

2020年是充满机遇与挑战的一年,这一年注定不平凡.随着5G商用.传统产业数字化转型加快,我们完全可以想象到互联网行业即将迎来自己的“高光时刻”,因此,现在学习web前端正当时. 那么,对于零基础小白而言,如何才能快速学习web前端呢?下面,小编就为大家分享web前端学习路线. 很多对于web前端工程师并不了解,先给大家介绍一下什么是web前端开发工程师.Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发.完成客户端程

前端知识体系2

Raw Blame History 1226 lines (983 sloc) 67.4 KB QQ联盟群交流(492107297)群规 GITHUB在线地址 http://t.cn/RL2NtqX 看云在线地址 http://t.cn/RUdaGHn 这是我们联盟群的组织结构,加入等级参考JS高级前端开发群加群说明. 这本来是我QQ群内部的一份公共约定的日常交流规则,后来得到大伙的一致认可,并用实际行动来捍卫它,使我倍受感动. 后来想:传播使爱更有力量,阅读使内心更为坚强,沉淀使生活更为醇香,

Web 前端知识体系精简

Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构.本文将对Web前端知识体系进行简单的梳理,对应的每个知识点点到为止,不作详细介绍.目的是帮助大家审查自己的知识结构是否完善,如有遗漏或不正确的地方,希望共勉. JAVASCRIPT 篇 0.基础语法 Javascript基础语法包括:变量定义.数据类

web前端知识体系大全

1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的是想要颠覆人们对于前端只有三大块(html.css.js)的认识——做web前端需要的比这三大块要多得多. 拖了好几个月了,但是由于近期将要参加的某一个活动,我不得不这两天把这个东西整出来.说干就干.上午我就开始在办公室画草图,乱七八糟的在那儿理思路. 大家不要害怕,其实下文中的这个知识框架要比草图中的好看的

前端知识体系之入门篇总结(一)

利用国庆节时间,把前端学习的知识碎片进行了整理,希望能在前端之路继续努力. 前端是一个范围很大的概念,其领域包括在了计算系统中的方方面面,可以说所有与用户交互行为相关的程序开发工作都是前端的范围,这包括一个数字仪表的显示设计或者一个手机APP.通常意义上讲,前端指的是Web前端的开发工作,而学习前端也是从Web前端知识开始的. 这篇blog面向对前端没有入门或者已经有一定的网页编码技术但对于前端知识体系没有一个清晰条理的开发者,其要旨是整理一个普通网页开发过程中所能用到的知识点.与其它类似的教程

自己总结的web前端知识体系大全【欢迎补充】

1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候.突然有了一个想法. 想把整个web前端开发所须要的知识都之中在一个视图中,形成一个完整的web前端知识体系.目的是想要颠覆人们对于前端仅仅有三大块(html.css.js)的认识--做web前端须要的比这三大块要多得多. 拖了好几个月了,可是因为最近将要參加的某一个活动.我不得不这两天把这个东西整出来. 说干就干. 上午我就開始在办公室画草图,乱七八糟的在那儿理思路. 大家不要害怕.事实上下文中的这个知识框架要比草图

Web前端知识体系精简

Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构.本文将对Web前端知识体系进行简单的梳理,对应的每个知识点点到为止,不作详细介绍.目的是帮助大家审查自己的知识结构是否完善,如有遗漏或不正确的地方,希望共勉. JAVASCRIPT 篇 0.基础语法 Javascript基础语法包括:变量定义.数据类