Web技术栈概览

前端+后端的需求——>产品上线。不同阶段用到的技术。
结合百度脑图完成。

百度脑图:
http://naotu.baidu.com/file/08d5a25b02492f7a397db0c41cce1e08?token=c9850eba6ef99c0a

WEB+DEV+TECH+OVERVIEW.png

怎么来管理项目(Project)
项目里有一个流程,通常有很多的流程,我们讲我们的项目流程的话,基本就是:定义需求,这个定义需求怎么个做法呢?一般我们就简单的用MarkDown来写的需求说明书,它的产出物叫做PRD(需求说明书).在传统意义上呢,除了需求说明书以外,还有需求规格书,还有功能规格书,就是类似的很多,咱们没有做到特别精细的上面去,就会重点写下PRD.规格书(FS)一般设计的话比较详细一些,比如说我要一些功能进行详细的描述的时候。

需求定义完过后,我们实际要做的话,不会做得那么详细,我们自己的产出物会是一个原型,我们通常的产出物会是这两个:PRD和原型,这是在节约成本和提高效率的情况下又保证必要的东西,那么,这个原型呢,它会有相关的东西叫做原型工具,一个原型长什么样子呢,它会涉及到,比如说举个例子,看一下原型工具,原型工具有很多种:磨刀,这个原型又分为交互原型,比如说这是一个APP的原型,什么叫做交互原型呢,就是可操作的,可在上面看到一个大概,这个叫做可交互原型,除了类似磨刀这种工具,我们还有很多的,草图,mockup工具,
https://www.zhihu.com/question/19592829(这个链接是原型工具PK图。) ,它这个就是用来画草图,做一些界面的效果,这些统称为原型,类似的工具可以列下来不到十种,它的一个作用就是向别人说明,你想要做一个什么样东西,那么,还有其它的,就是Wireframe线框图,这些相关的东西,都归纳到原型里面,有线框图,有交互原型,这里边原型又涉及到用什么工具,用什么来表现好,我们刚才已经说了两种了,其实还有很多种,我可以做成视频,可以做成高清的,可以做成动画的,翻页的效果,可交互的,再看一些其它的。

我们通常情况下,在整个项目流程中,定义完需求后,第二个重要的事情就是会有界面设计,那么定义需求这个事情呢,如果把我们的员工当中来分割类,我们的人员大概会分成几个,第一个呢,叫产品经理,第二个叫项目经理,第三个架构师,。。。划分的方式有很多种,我们今天关注更多的是从技术性角度会涉及到哪些,从功能性角度出发会涉及到哪些成员角色。

从功能性角度出发的成员角色,由产品经理定义需求,当然这个范围我们不能再扩大产品经理之前还有其它的人,定义完需求,由架构师,这里边分为前端架构师,和后端架构师,也有可能一块做的。这些当中,大概有6个角色:产品经理,架构师,UI&UE设计师,前端开发人员,后端开发人员,测试工程师。这任何一个角色都可以作为一个人的职业做到很深很深的地步,当然架构师有点例外,它需要先通过开发人员的素质过后,才能够上去,从技术的角度没有高低之说的。

职能性角度的成员角色出发,初级产品经理,高级产品经理,再到资深产品经理,再做管理岗位,架构师一般会先从它的出发点会在前端和后端,然后再上升到架构师,架构师最后做不动了,最后就会做管理性的岗位,这里边从任何一个都可以转。但是侧中心不一样,每个人的侧重心,工作领域不一样,一个最理想的人呢,这些全部都OK。

这上面呢,一个是往深度发展,一个是往广度发展。有一些公司有可能没有这些职位,有一些可能有这些职位。如果是从技术的项从事管理型的工作,这里边就分为,项目组组长,然后呢,开发经理,技术总监,CTO,高管(高级管理人员,从公司管理层面的话就是CEO,CTO这一类级别的)
技术总监是由技术发展起来的,它的职责也会谈技术,侧重于对技术趋势的把握,判定,我们马上做人工智能呢?还是做网络开发,我们投向哪个方向呢?哪个领域需要哪样的技术呢?深度学习怎么切入啊,这一类的。
架构师是从宏观的角度分析的,对细的技术可能把握的不是很深,侧重大层面,后端通信,技术选型,规划。一般UI设计师好一点的话要从美术出身,UE是(用户体验)。UE包括对某一个按钮点击完了过后,它给我们的反馈是什么信息,就是特别细节的东西,要不要加动画,然后体验怎么样,包括流程啊,等等的。

功能性的是偏技术与产品的。职位性的相对于说跟人打交道多一些,跟外部沟通多一些,在功能性上有一个比较例外的,就是产品经理,它需要在逻辑能力,跟人打交道的能力上要很强,它是跨组织,部门之间沟通比较多的,就是那种比较会吵架的。产品经理有可能对技术了解不是很深,但是需要了解。项目管理里边,会涉及到项目经理,等等,它是以项目为中心,也有可能是技术出身的,在现实情况当中,总会有一个起点,它是从哪里出身,最早是做什么,它某个方向的领域就会积累的多。

当然以上我们只考虑到网络开发,还有很多其它的。我们还需要具备的基础性东西。作为一个架构师也好,工程师也好,有一点需要我们基础需要什么东西。第一个Knowledge,第二个是TOOLS(工具),第三个是Logic(逻辑思维)。

先说下Knowledge,需要涉及到计算机相关的基础,读大学的时候,有一个专业,《计算机科学与技术》讲的是计算机的必不可少的组成,计算机结构。内存,硬盘作用。等等基础。它包含了操作系统,运算设备,存储设备,输出设备(打印机,显示器,显示屏,听筒,有一个目的就是把计算机的结果以某一个方式展示给用户,它发出声音也好,发出显示也好,指示灯也好,这一类的都叫做输出设备),输入设备(键盘,鼠标,触摸屏,麦克风这一类的,计算机运算设备(CPU,GPU,包括现在的TPU,把输入的内容运算得到一定的结果,然后呢再交给输出的运算设备,每台电脑都有CPU,),包括手机也算,提供信息,输入信息的),电源(不可组成的一部分,它是一个功能设备,我们可以拿蓄电池,风力发电,早期的时候没把它列进去,纯靠人工用手摇,然后来提供能量)。很早很早的计算机是在一张纸上,打眼儿这种方式。所以在电源上,它就不是一个核心的东西。

《软件工程》:修桥,修路,修房子叫做建筑工程,在软件领域,建网站,做APP.做开发,人工智能,归到软件工程,软件开发纳入工程性范围概念里面来,你看我们建造大桥的时候,它会有一个流程,就像刚才说的叫做项目管理,还有工程管理,一样的,桥梁设计成怎么样,设计多大的桥梁,需求,需要哪些物料,需要多长时间的施工,施工过后怎么管理,我们在软件当中也一样,也是需求是什么样,然后设计成什么样,刚才我们在前面列了一个项目,项目是软件工程里边的一个实现,我们做一个项目,可以把它归到管理去,通常我们在软件工程当中呢,会学到这些,就是学习一门什么开发语言,使用什么样的开发平台,采用什么样的开发框架,你的开发流程是什么样,比如说,现在我们分为前端后端,那么我们说前端的一个项目,javascript语言来做,我们做app的时候,不一定用到javascript,我们用vue,java.c#,那么开发平台,会有.net(一个平台),平台包含运行环境,它在什么环境下运行它在哪个操作系统运行,它有什么基础框架可以用,然后基础库,然后这里边的东西,开发框架到底是采用asp.net mvc ,还是用angular,然后我们这里边的一个常规开发流程,我们先初始化一个项目,先怎么做,后做哪些,就是这些统归到学术来讲,也就是说,在一个从事技术领域的,最好大学的专业呢,先学《计算机科学与技术》,这个学完过后呢,可以不学《软件工程》,可以做计算机相关的事情,《计算机设计》,《手机设计》,《物联网某一个设备的设计》,因为,刚才那些东西,都少不了,软件工程师涉及到我们软件的东西,一个科班出身的开发人员,是在这两个方向成长,就深入学习的。

《电子工程》:硬件。最好都学一些原理知识,涉及到电子,通信,有线,无线,这些东西。

这些东西的,如果没有系统性学习过的,需要去补回来,在实际过程当中,理论的东西是占据一部分,非科班出生的,比如有些演员,不是中戏出来的,它不是某某一个戏剧学院出来的,那么它依然做了演员,但是,它就把基础的东西,相关的东西有一部不是面面俱到,最理想的是那种资深的人,做得特别好的人,老戏骨,一定把相关基础的东西接触过的。

《计算机网络》:HTTP相关的东西学习。

TOOLS(开发的工具):包括IDE,Editor,(编译,打包(构建)),(测试,预览),版本管理。
说到IDE,什么是IDE,全称就是(integrated development environment)集成开发环境,什么是集成开发环境,如果解释不出来就举例,visual studio,Android studio,Xcode,Eclipse,为什么visual stuido叫做IDE,而VS CODE不叫IDE,Editor:WebStorm,vs code, Atom,Vim,Sublime,Edit plus,...编辑器的作用在于对某一个格式的文件支持,我们是用HTML一种编辑器,word也是一种编辑器,我们这里边只说开发相关的,那么,到目前而言,特别不错的,是WebStorm,然后呢,后起之秀,超越WebStorm的,有vs code,开源领域界,有Atom,github出的,Vim是linux的,这些功能比较简单,主要是用来处理,编辑某一个语法,格式,CSS,html,markdown这一类的,它仅仅用来编辑,刚刚我说的IDE就不一样了,IDE除了编辑器以外,还打包了,怎么编译成计算机能够识别的语言,相关的配置的东西,比如说项目,怎么把一个文件组织成一个项目,visual studio里边有项目结构,包括还有测试相关的,功能比较全面,visual studio 微软出的,它可以兼容多语言,php.c++,Android Studio是谷歌出的,用来做安卓相关的开发的,还有一个苹果端的,Mac上的,XCode,是早期做JAVA开发的。Editor有可能功能多一点,但是它仅仅只是Editor,这种巨无霸的就归纳到IDE里边去。还涉及到编译里边,在我们的开发环境中,visual stuido,后端是必须的,建议使用配合 vs code,然后版本管理工具呢,有Git(开源界出的),TFS(微软出的),SVN,
我们重点在Git,这些都要把它用溜了。

计算机网络:
补充<计算机科学与技术>:操作系统:Windows,Mac OS(原来叫X OS) Linux,Unix,Moblie(IOS(是在Unix与Mac的基础上延伸出来的),Android(是在Linux基础上改出来的,)).Windows Mobile,FireFox OS等等。

Logic:(微积分,数学类的东西。逻辑思维的培养)

自我定位:
讲前端,参考《软件工程》这部分,云端:阿里云,微软的Auzure都可以装Linux,可以试验装操作系统。系统的话,作为技术开发人员,都得尽量跟上时代,现在是win10时代了,win10 跟win 7有什么区别啊,装一个系统就能知道了,通过装系统,你就能知道系统有什么东西,软件层面的,bios 就是操作系统与硬件之间还有一层系统,基本输入输出系统,unix是在一些大型的机器上用的多,mac是基于它发展起来的,我们的web开发就是属于软件工程的一部分,www(万维网),现在随便访问一个网站,从域名的角度来讲,它需要输入www吗?都是可以的,那么现在访问网站,怎么前面都有一个www呢?它的全称叫做(World Wide Web),它是一个惯例,也就是说前人这么干,后人就照着这么干了,只是一个习惯,一看www,就知道是个网站。
单从浏览器来说,又分为dns ,域名。计算机网络有一个分支,叫做HTTP,领域越广越好。
其他的是要深。既要深又要广。

web里面,我们只说web开发,相关的原理就是把http协议看一下,还有浏览器,最早的浏览器做得比较好的,叫做网景公司,那个时候微软是在做do,苹果,osx,gui(用户交互界面),现在看到的win,就是基于这个,微软看到网景公司搞了这个,就觉得不错,win早其的时候特别简单,真正可用是到win3。
现在呢,苹果一直都是做一体机的,叫APPLE,在PC时代,苹果都是老大,后来呢,win就胜利了,苹果就衰落了,后来,就出现了MP3,iPod(听歌的), 后来就是XP,win统治了时代十多年。这个就是桌面历史。

还有就是浏览器历史,Nexus,微软就开发了IE,最早是收费的,微软就制作一个免费的,就给你自带。
紧接着IE就取得成功,就开始不思进取了,没去改进。
Opera浏览器,它做的体验做得比较好,
后来,Mozilla基金会(开源界的组织),就说微软这样不行啊,就开始花人花钱。
有一家做搜索的公司就觉得很好用,就投入重力,开发了一个Chrom浏览器,现在几乎开发人员必备,大概就是关于浏览器的历史。
到了IE6,就朝着两个方向发展,移动端就起来了。就出现了安卓,IOS,快速迭代,超越了Firefox,在一定程度上,影响了IE发展。

就出现了IE7,IE8一直被人吐槽,直达IE9才好一点,能支持的标准都已经支持了,浏览器是很复杂的,不必操作系统简单,所以说有很多历史遗留的问题,所以微软就打算推倒重来。

所以在win10 会默认带一个edge浏览器,edge的水准就跟Chrom接近了,但是已经错过win pc的发展时代,win 10的增长没有那么快,chrom做得太好了,虽然技术是不错,但是市场上并未取得成功,这就是桌面浏览器。

苹果向来什么东西都喜欢自己做,苹果自己也搞了一个浏览器,而且做的还不错,自己开源了一个东西webkit,把浏览器的内核开源了,chrom就是在webkit的基础上做出来的,苹果真的是一个非常伟大的公司,在桌面时代,它创建了GUI,然后被微软超过了,在移动互联网时代,搞了一个IOS,又引领了时代,在浏览器的领域,它开源了浏览器,直接影响了chrom,奠定了基础。

微软就亏在前一任领导,是做销售出身的,对技术不是特别重视,微软的软件是独步天下无敌的,但是呢,在移动互联网失事了,所以没发展起来,搞了一个win phone,绑定了诺基亚,诺基亚后来死了,后来,微软新的CEO,是印度人,纳达尔,提出了:移动优先,云优先 的策略。所以说,往后你会发现,微软虽然喊出了这个口号,已经很难的,但是云优先,优秀的人,顶端的人视野是走在前面的,除非走一些弊端影响到它。

云优先,现在有三家公司:亚马逊,Azure(微软搞的),阿里云。

在往后的发展中,网络会逐步取代本地的一些东西,现在很多东西已经存在网盘里,不再存在硬盘里,但是操作用户行为还是没有统一,不光是数据的存储,我们软件的应用,都在本地电脑上运行,比如说PS,等等,现在呢,我们做原型的时候,都是在网上直接做,在图形领域的绝对老大,它也在往云上迁移。

从技术,偏向业务,那么,亚马逊它就是一个奇葩公司,是一个做电商的,但是呢,他们的老板,奉行一个策略,我赚多少,我花多少,不盈利,一直干了十多年,所以就持续的投在了云上,所以说,一个电商的网站就变成技术的巨头,因为它们在投入上,持续的投入,而且整个这几个上,亚马逊的云是做得最早的,最好的,那么第二个阿里云,电商做这个云,有一个好处呢,就是电商有一个流量的爆发,比如说双11,就是说我买大量的电器来承载电商,需要的时候我就用,不需要的时候我就租给你,这是云最早的起源。现在租用给别人就已经成为一门生意了。

云优先就是微软,微软在软件领域很牛很牛,所以说,它出了很多东西,.net core全部开源了,然后它很多的TypeScript也是微软在用,在语言领域,软件领域,是登峰造极的领域。

云的概念是相对的,原来在局域网内,本机的操作,我放在网络上操作,这个概念就变成云。我访问的网络,它不是云。云是业务性的概念。

当然,关于云计算这里边还有很多的内容,IaaS,paaS,SaaS。

浏览器,我们正常的一个人,要跨越网络或者和别人共享信息,www.
浏览器是一种user-Agent(用户代理),什么情况下,我们会用到这个字段,HTTP协议上是有的,就是服务器会根据这个字段来判断这个客户端是什么东西,我们标明我是一个IE,我是一个Chrom,或者其它的
用户交互界面接口,network《计算机网络》,在这里边,它们之间需要通讯,需要协议,这里边,就有HTTP协议,这个协议分为底层,中层,高层,从三层协议再到七层协议,现在网络上属于第七层,是应用层面的协议,用户能看的协议,那么,我们平常,用户要与服务器上的进行交互,出了一个标准(HTML).

早其的HTML定义了格式 和 样式的,Table(显示 形状),
HTML(Hypertext Markup Language)存在一个问题,
XHTML ,HTML 4.1.
现在,是HTML 5(H5),现在大家说的H5,CSS2 ,CSS3,JS ,ES5.
Sun操作系统,
JS是有专利的,微软就搞了VB Script,后来搞了JScript,微软IE一直都是抄网景的,
ES最早是ES3,ES4难产了,弄不出来,现在浏览器广泛支持的就是ES5,
这个统称为H5的合集。

一个现代化的前端开发,08年的Web 2.0:AJax

HTML DOM Object
XML Object,

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容