制造业
前端开发
前端开发


简介

限于早期 Web 浏览器的定位与功能,20 世纪 90 年代 Web 诞生至 21 世纪初,网页主要用于展示,最常见的方式是使用HTML (HyperText Markup Language, 超文本标记语言) 将文字,图片,影音资源组织在一起进行展示, 并使用JavaScript, CSS (Cascading Style Sheets, 层叠样式表) 完成一些更高级的功能。后期,Flash 等浏览器增强插件平台曾以引入外部可执行组件的方式大大丰富了网页的能力和表现力,一度成为网页开发的主流。但目前已被逐渐淘汰, 不被主流浏览器支持(如Chrome已不支持)。

评判标准

前端开发是通过创建网页页面或App等前端可视界面将数据呈现给用户的过程,通过各种技术,来呈现用户最直接感受的画面。 简单来说,任何肉眼看到的、可以交互的界面,都可以视为前端页面,甚至游戏的画面,都可以说成是前端画面。抽象一点,你即使用的是DOS命令,输入的全是文字指令,这个界面也可以称之为前端。但是随着技术的发展,前端的定义也越来越趋于模糊,因为现在很多的前端框架都可以实现深度的交互甚至是逻辑。有些逻辑的处理甚至只用前端技术就可以实现繁杂的页面交互。 随着时代的发展,前端开发也出现了自动化、工程化、模块化等新的定义。

种类

现代网页开发大量使用 JavaScript 来增强用户体验,逐渐从「网页设计」转变为「应用开发」,网页开发进入了一个全新的时代,浏览器成为了新一代的通用客户端平台,JavaScript 社区快速发展,从简单的辅助交互脚本,摇身一变成为几乎所有 Web 应用的基础,相关的框架层出不穷,代表性的有 Vue、React、Angular。

因现代网页自由度高、迭代方便、跨平台能力较强,不少应用采用网页和原生客户端代码混合的方式开发,甚至衍生出了相关平台,如小程序等。

限于早期 Web 浏览器的定位与功能,20 世纪 90 年代 Web 诞生至 21 世纪初,网页主要用于展示,此时的网页目标在于以各种方式展示多媒体内容,最常见的方式是通过 Photoshop、Fireworks、Dreamweaver 等软件精心排版,并辅助以一些基本的 JavaScript 片段来完成一些简单的交互效果。由于当时网页开发的一些局限,当时网页开发从业者大量重复切割设计稿图片并使用 HTMLCSS 拼接,故一度被称为「切图仔」。在这一阶段的后期,Flash、Silverlight、Java Applet 等浏览器增强插件平台曾以引入外部可执行组件的方式大大丰富了网页的能力和表现力,一度成为网页开发的主流。Flash 更被民间称为「网页开发三剑客」之一,至今仍有一部分网站依然在使用 Flash 来增强用户体验,虽然这些做法事实上已经过时。

自谷歌的 Chrome 浏览器发布以来,现代网页开发大量使用 JavaScript 来增强用户体验。以 Gmail 为代表,现代的网页开发逐渐从「网页设计」转变为「应用开发」,网页开发进入了一个全新的时代,浏览器成为了新一代的通用客户端平台,因此「网页开发」近些年来有了新的名字「前端开发」,与网站后端数据和业务逻辑开发相对应。JavaScript 社区快速发展,JavaScript 语言从简单的辅助交互脚本,摇身一变成为几乎所有 Web 应用的基础,相关的框架层出不穷,目前流行的框架中,逻辑相关的流行框架有 Vue、React 与 Angular,UI 组件库类框架有 Bootstrap、Foundation 等,各个逻辑框架亦有各自较大的组件库。

大量原先的「客户端」「桌面应用」等亦广泛在其中采用现代网页,因现代网页自由度高、迭代方便、跨平台能力较强。不少应用采用网页和原生客户端代码混合的方式开发,甚至衍生出了相关平台,如小程序等。

单页应用SPA

单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。此类网页更接近原生手机应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript,之后所有的操作都在这张页面上完成,这一切都由JavaScript来控制。因此,单页Web应用会包含大量的JavaScript代码。

基于Vue、React 与 Angular等前端开发框架。开发者可以组件化的开发网页的各个部分,最后拼装到一起。这样的开发逻辑,与原生APP更加相似。

但是单页应用SPA(Single Page Application)也存在致命的缺陷,在百度搜索中,对关键词是抓取是基于HTML文件上的关键字词进行抓取搜索,单页面应用将所有的页面代码压缩成一个JS文件后引入,导致页面对百度抓取并不友好,所以在实际开发中,单页面应用也并没有广泛应用,再后来也出现不少类似于Nuxtjs和Nextjs的服务端渲染(SSR Server Side Render)框架。其原理是将整个页面所需代码一起发送给服务器,服务器再交给访问者浏览器展示,这样解决了SEO(搜索引擎优化)。两种方式各有优缺点,SPA侧重于用户访问速度和页面切换之间的速度,SSR则是对网站推广,搜索的便利

相关技术

  • ajax:一种从前端向后端发送、请求数据的方式。页面上的数据都需要通过AJAX同步、提交。
  • 路由:
    • 在URL中采用#号来作为当前视图的地址,改变#号后的参数,页面并不会重载。
    • 使用pushState或replaceState的路由栈维护方式,和普通路由形式相同,页面又不会重载。

常见单页应用

  • Gmail
  • Evernote
  • Trello

渐进式网页应用PWA

渐进式网页应用应用(Progressive Web App, PWA),是一种利用浏览器日益丰富的网页应用支持而实现的贴近原生App的网页应用。在保持网页应用高度的灵活性的同时,PWA使得应用能够更好地弥补在线网页的缺点,并减少跨平台开发的难度。例如,PWA可以实现网页应用的离线加载和使用,并支持后台消息推送等功能,使得网页应用的用户体验进一步提升。

现阶段,包括Vuejs在内的大多数前端框架都给出了PWA的开发与构建方法,越来越多的应用加入了PWA的阵营。

相关技术

  • service worker:一种浏览器允许网页js脚本后台安装、运行的方案。
  • 前端存储技术:包括localStorage/sessionStorage(网页本地存储)和indexedDB(前端数据库)等在内的一系列数据前端储存方案。

著名的渐进式网页应用

  • Google Doc
  • Twitter Lite

工作流程

  1. 由产品确认页面功能与大概的页面格式(页面原型);
  2. 由UI 的设计人员根据原型设计出每个页面的每个控件样式、颜色和布局;
  3. 前端程序员根据设计用 HTML (超文本标记语言) 写出网页的“骨架”部分,包括顶部导航栏,尾部版权声明,页面中的下拉菜单、跳转链接等空间和其他内容;
  4. 前端程序员根据设计使用 CSS (样式层叠表) 写出页面的“血肉”部分,比如不同颜色的超链接文字,鼠标移入某一控件时的动画效果,不同内容的背景颜色等等;
  5. 前端程序员根据设计使用 JavaScript (运行在浏览器上的解释型脚本语言) 为页面注入灵魂,像页面之间的跳转,涉及到数据部分的改变,就是 JS 的功劳,另外有一部分复杂动画也是 JS 负责实现;
  6. 前端程序员与后端程序员通过接口将前后端程序结合在一起,实现用户注册登录、浏览网站内容、在网站发表文章等等一系列功能;
  7. 前后端结合,测试完成,部署上线

组织结构

部门分工

人员分工

对一个软件产品或者一项软件工程来说,参与角色通常包括如下几种:

l 高级经理

l 产品经理或项目经理

l 开发经理

l 设计师

l 测试经理

l 开发人员

l 测试人员

l 项目实施人员

高级经理 具体参与项目或产品的时间并不多,但对项目的成败却起到了至关重要的作用。通常高级经理参与项目过程中各个关键环节的活动,关注产品开发的进度,对风险控制、资源提供做出决策。

产品经理 (项目经理)作为客户方和公司内部交流的纽带,对项目过程进行监控,对项目的进度、质量负责。产品经理应该是软件工程领域内的专家,但不一定是业务领域内的专家。产品经理的基本活动包括:制定计划、协调资源、关注和控制计划进度、控制客户期望值。其中控制客户期望值这一项在工程性质的项目中尤其重要。

开发经理 是具体开发过程的领导者,必需由熟悉业务和开发技术的专家担任。开发经理的职责是界定需求,确定适当的技术构架和体系,保证软件产品按照设计的标准开发。

设计师 是软件蓝图的设计者。通常设计师可以分需求分析师、构架设计师、业务设计师三种,在小规模的开发团队中,这三个角色通常由一个人承担。设计师一定是业务领域和技术领域内公认的专家,具有丰富的项目经验,能够准确把握客户需求并提供可行的实现思路。设计师的基本活动包括:进行需求分析、进行构架设计和功能设计,按照规范编写相应的文档,将设计思路传播给开发人员、测试人员。

测试经理 是测试活动的领导者,是公司内部认定的产品质量责任人(项目经理是对外的软件质量责任人)。测试经理的责任是计划和组织测试人员对目标产品进行测试,发现 bug 、跟踪 bug 直到解决 bug ;计划和组织用户培训工作。

产品经理、开发经理、设计师、测试经理作为一个项目的高层,对项目的成败起关键作用。

开发人员 根据设计师的设计成果进行具体编码工作,对自己的代码进行基本的单元测试。通常 3 ~ 4 个开发人员组成一个开发小组,由一个 team leader 带领进行开发活动。开发小组 team leader 由小组内技术和业务比较好的成员担任。 team leader 通常还负有进行详细设计和走查小组成员代码的职责。考虑到 team leader 需要进行详细设计、编写文档,和小组成员进行沟通,因此一个 team leader 的开发任务不能超过开发人员的平均任务量。对开发人员而言,必需具备产品开发所需要基本技术、技能,比如编程语音、数据库应用开发经验等。如果发现开发人员不完全具备这些技能,开发经理和项目经理应该提供必要的内部或外部、培训,以使开发人员具备这些必要的技能。

测试人员 根据测试经理的计划和测试总体方案对目标产品进行测试,编写测试 case 和测试代码,发现和跟踪 bug ;编写用户手册;进行用户培训和教育。测试人员介入项目的时机从理论上讲越早越好,但考虑到测试人力资源,通常在需求分析确定后介入比较合适。对测试人员而言,除了要求和开发人员相同的技术技能外,还应该熟悉测试理论和测试方法,尽可能做到总是站在使用者的角度观察和思考问题。

项目实施人员 是针对工程性质的项目必需的人员配置。项目实施人员负责软件系统安装配置、系统割接、运行期间的维护工作。

项目开始前,项目成员必需明确自己所在的岗位和需要承担的责任。

项目组织的过程中,必需遵循的一个原则是项目组尽量小型化、灵敏化,保证沟通顺畅和高效,通常一个小型项目组的成员不超过 20 人。对大型项目,应该进行更详细、精确的拆分,保证一个项目经理管辖的成员不超过 20 人。

经营设计

  1. 根据用户需求 UI设计师设计其相应的页面交给前端程序员
  2. 根据市场需求制作相应需求的画面及设计

需求分析

  1. 根据用户需求,制作各个页面相应板块功能。
  2. 据相应市场,制作需求的功能 如:阅读,放大,保存,转发等类

目标界定

  1. 由PC端浏览器展示的前端web网页
  2. 由移动端浏览器展示的web网页,基于安卓与iOS有偏差,部分UI设计师会制作不同页面效果
  3. 自适应式web前端页面,该页面能良好的适应不同PC端分辨率及移动端分辨率,展示良好的页面效果

总体结构设计

详细结构设计

参数设计

设计实施

工具

图形编辑 & 原型制作:Photoshop、墨刀、Axure、Mockplus、Pixate、INVISION 等

代码编写:Visual Studio Code、Sublime Text、WebStorm、Visual Studio、Atom、HBuilder、Adobe Dreamweaver 等

代码托管:GitHub、GitLab 、Azure DevOps 等

版本控制系统: 最通行的解决方案为 Git。网页开发行业几乎不选用其他版本控制系统。

主要语言

网页的编写通常都是由HTML(超文本标记语言)、CSS(层叠样式表)、JS(一种弱类型的解释型脚本语言),这三种语言编写完成的。按照业内开发规则通常是HTML负责网页的框架,CSS负责样式,而 JS 负责网页的相关逻辑。现如,html文件选用html5的规范进行编写,CSS也是使用CSS3的规范,JS的语法也是在逐年的更新,如ES6、ES7等。TS 作为一门诞生于JS的语言扩展集,既继承了JS的优点,同时也在此基础上有了改进,稳定性和严谨性都有了提升,使用TS来开发也是未来发展的趋势。

HTML

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

HTML标签是由尖括号包围的关键词,比如<html>,一般是成对出现开始和结束标签也被成为开放标签和闭合标签,比如<p></p>,标签中可以存放页面元素和相关内容。 HTML文档就是网页,浏览器通过解析HTML文档渲染出整个网页的内容,并以我们熟悉的网页形式显示出来。

CSS

CSS是美化网页的一种样式表。CSS 决定了一个标签的显示方式、是否有边框、是否有阴影等,以及其中文字的颜色、大小等。引入方式有行内样式、内部样式表、外部样式表三种,最常用的为外部样式表,通过 style 标签引入。

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
  • CSS 有优先级、继承性和层叠性
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中

JS

HTML+CSS就能写出一个静态的网页样式,但很难仅通过这两种语言来写出一个动态的网站。JS 脚本语言的出现能够改变HTML的属性,动态的对HTML,CSS进行修改,主要目的是给HTML网页增加动态功能。通常 JS 脚本是通过嵌入在HTML中来实现自身的功能的。

  • JS 是一种解释性的脚本语言(其代码不需要进行预编译)
  • 跨平台支持,可以支持绝大多数的浏览器、操作系统
  • 可以直接嵌入HTML代码中,也可以单独写成一个js文件

JS 脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算术运算符及程序的基本程序框架。JS 提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方,表达式则可以完成较复杂的信息处理。

设计和规划

一、UI设计师根据产品需求分析文档,对产品的整体美术风格、交互设计、界面结构、操作流程等做出设计。负责项目中各种交互界面、图标、LOGO、按钮等相关元素的设计与制作。

位置与环境

投资与评估

规模与功能

风格与形式

成本

税费

金融成本

原材料成本

房租成本

能耗成本

人工成本

设备折旧

收益管理

消费曲线

时间分布

空间分布

目标群体

容量控制

风险控制

行业

o2o、社交、教育、智能硬件、游戏、生活服务、自媒体等。

国内市场

产量

消费量

国际市场

产量

消费量

主要公司

国内

腾讯(深圳)、百度(北京)、阿里巴巴(杭州)、京东(北京)、小米(北京)、网易(杭州)、拼多多(上海)、趣头条(上海)

标准

这里存放条目相关的国家标准 网页开发实际为前端开发中WEB开发,网页开发标准遵循W3C(World Wide Web Consortium万维网联盟)网页开发标准;

W3C官方网址:https://www.w3.org/

文档

这里存放于条目相关的其他文档

编辑成员
31 人

QioQio痛, 東澔, 1234稻草人, Phantomlsh, rm0l, KIG2O, Faker, BOOK-BLOG STUDIO, quanee, 福尔摩松, 宇不点, daly, Amani, Pooh, Qnner, 阿白, Nan.南城, 王大白, 良绅, 木又, UxieKong, 华南, AP0STR0PH3, laosb, 秋山骏, 李大强, 杀不死, Jackie, 梅花落满了南山, 风清怜宥凉, zhshch

评论(9)

你需要登录发表评论。
1234scarecrow 2020-07-15 16:52:41
严谨来说三大头,HTML CSS JS,现在的话可以加一个 TS,不过不是很严谨。
毕竟所有框架都是基于三大头,TS 最后也要编译回 JS
Skrupellose 2019-11-28 13:10:45
关于具体开发涉及到的语言 不知各位有什么建议呢?
oLubo1Y1foZm5vZnr0Wgm7nLO5ew 2020-02-16 00:00:05
前端入门小白路过~
小生不才 2020-01-15 19:15:13
php适合快速建站,不适用于大型互联网企业,可能在过五六年就被淘汰了
SheepChef 2019-08-15 13:48:34
PHP没有吗?现在很多网站都是PHP写的,例如Wordpress
福尔摩松 2019-12-12 18:52:55
PHP现在冷门了,没有多少企业用PHP写后端了。
SheepChef 2019-08-15 13:48:34
PHP没有吗?现在很多网站都是PHP写的,例如Wordpress
Skrupellose 2019-11-28 13:10:45
关于具体开发涉及到的语言 不知各位有什么建议呢?
12
回形针手册-icons