前端开发的盛宴

想写这篇文章由来已久,目的是想回顾一下基于Web技术的开发技术和流程的变迁,以及其背后的原因或规律。

3b500b54c89a2f8c5c0c2564542b787a.png

我依然记得,很多年前做出来第一个公司网站时的激动心情(加班到晚上,兴奋地在空旷的办公室走来走去),虽然那个网页上面的内容基本上都是固定的,只是加了一点点动态效果,例如根据当前时间显示“上午好” 还是“下午好”等等。当时作为一个工科出身、并没有多少审美情趣的业余程序员,完全拿捏不好如何显示好看一点的字体或者颜色,但仍然以能通过IIS + FrontPage Server搭建出来这么一个东西感到很神奇。

385e58d0cec0280678442905c03fab12.png

后来兴起了一波互联网的热潮,网络开发的技术突飞猛进,典型的产物就是很多服务器编程技术或框架大行其道,例如PHP,JAVA, ASP.NET等等。开发人员相对来说更加习惯用服务器编程思维进行工作,团队中当然会有美工,但主要工作只是用来做切图,还没有真正意义上的前端或交互设计的概念。

55d49715e0f7666235c7bd9e5f053b66.png

再后来移动互联网大行其道,安卓和苹果两大平台不断推陈出新,虽然它们的编程体验并不友好(尤其是iOS开发),但挡不住移动化的趋势,不断涌现的场景和业务机会,使得越来越多的人去学习移动开发,风头一时无两。

2068893609ce65be3c0b024ac9c5909a.png

经过前几波的发展,人们也有机会对不同的几种应用开发的方式进行比较。当时的共识大抵是:移动设备虽然不至于完全取代桌面,但仍然将逐渐成为一个很重要的终端,长远看移动设备一定会超过桌面。所以,移动化的路线是没有错的,但移动应用开发和维护的成本其实很高,也不够敏捷,而传统的网页开发技术又显得笨拙。这样的大背景下,HTML5应运而生了。HTML5不仅强化了在浏览器端的能力(不管是表现能力,还是编程能力),而且最重要就是添加了设备的能力。HTML5技术的出现和逐渐成熟,催生了前端技术栈。而为什么前端受到越来越多的关注,也是因为我们越来越注重用户体验。

473c61c8e651d346a637e8a4384b6a57.png

Angular,React和后来的Vue,虽然本质上是不同的东西,但经常拿来做比较,这是因为它们确实是目前主流的几种做前端应用的方式,各有优缺点。我个人对React比较熟悉,虽然写的并不多,但也惊叹于它的设计理念,Javascript可以搞定一切,天生组件化的设计,这些都让原先只会做服务器端开发的程序员们,终于也敢放开手来做前端应用了,而且前端的能力得到了空前的提高。

d6ad8f8b4ef937c4aca8b6851bb8b60d.png

得益于HTML5的发展和浏览器的进化,我们现在可以在前端完整地实现一套应用,不仅仅能在浏览器内部运行,也可以安装到桌面上,甚至脱机使用。上述这个应用,加载成功后,会在浏览器缓存中保存107MB的数据,所以实际上很多的操作都是在本地完成,不需要发起服务器端调用。这在以前是无法想象的。

3abb73b6981f65234aa4201ad6e60de3.png

目前发展下来几代技术,既是一脉相承,又螺旋迭代进化。移动本机应用和网络应用是否能无缝整合,目前逐渐揭晓的答案是“混合应用”(Hybrid App),你中有我,我中有你。这样既能利用本机应用(Native app)的设备相关能力以及性能,又能使用网络应用(Web app)的创新开发框架和迭代能力,岂不美哉。远的不说,Teams就是一个典型的Hybird app,此前是用Electron这个框架来做运行框架,内部其实全部用Angular写的一个Web应用。现在已经改造成使用Edge Webview2来做运行框架,完全用React编写。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/297117.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

datav本地部署 java,Spring Boot对Spring Data JPA的自动配置

一 点睛Spring Boot对Spring Data JPA的自动配置放置在如下路径:二 源码分析1 JpaRepositoriesAutoConfiguration类分析ConfigurationConditionalOnBean(DataSource.class)ConditionalOnClass(JpaRepository.class)ConditionalOnMissingBean({ JpaRepositoryFactory…

靠拿奖学金完成学业后,博士生为女友放弃年薪30万工作选择留校任教

全世界只有3.14 % 的人关注了爆炸吧知识“相恋八年,一路陪伴。研究生毕业后,博士生决定为女友放弃年薪30万的工作选择留校任教,因为曾和女友约定一起当老师。好的科研爱情,或许就是这样携手前进。索长友是哈尔滨理工大学的博士生&…

小菜学设计模式——观察者模式

2019独角兽企业重金招聘Python工程师标准>>> 背景 上一次去看电影院看电影,半旁边的妹子说只要扫一扫就能免费领取爆米花一份,你说我怎么躲得过妹子的招数呢?所以拿起我的手机,扫一扫,注册会员&#xf…

获取 子文件夹 后缀_CSDN学院第一个Ptython Homework-- 递归统计文件夹大小

作业:通过第一周学习的内容,自主编写一个py文件,能够递归文件夹大小,并将统计后的大小进行格式化输出.作业体现形式:以代码的方式保存成后缀为py的脚本.作业的注意事项:1.文件名命名规范.2.注释清晰.3.运行结果符合预期效果 .思路提示:1.使用python内置的os模块来进行文件相关的…

java 链表逆序 递归,java用递归和非递归实现链表逆序

传统的逆序链表方法是使用三个指针来记录节点的状态,防止链表断裂。Node节点public class Node {private int data;private Node next;public Node(int data){this.data data;next null;}public int getData() {return this.data;}public void setData(int data) …

史上最硬核老师:17年间,拿着菜刀把400个混混送进了哈佛耶鲁麻省!

全世界只有3.14 % 的人关注了爆炸吧知识今天,来给大家介绍一位硬核教师Jaime Escalante——手握杰斐逊奖、自由精神奖,拿着菜刀把400个混混送进了哈佛耶鲁麻省。海梅斯埃斯卡兰特(Jaime Escalante)初出茅庐1930年12月31日,Jaime出生于玻利维亚…

数据库表设计

数据库表设计 分析上述各实体的属性集,从中找出关系的主键,然后用关系式来表示实体(其中下划线的属性为主键)。表4-1至表4-5分别给出了主要表结构各实体的属性如下: 表4-1 admin 表名称 主要字段 数据类型 长度 属性 输入方式 描述 …

抓包写代码模拟怎么减少重复劳动

由于工作需要会经常需要Fiddler抓包Chrome F12抓包然后根据抓包写代码来模拟,一般来说我都是先抓包,打开postman把抓来的包放到postman里面模拟请求然后利用PostMan的生成代码功能大部分的Reponse都是Json,为了方反列化接着要打开一个在线工具…

机械史上最复杂的巅峰之作,这才是最强大脑!

全世界只有3.14 % 的人关注了爆炸吧知识今天我们来认识一下机械史上最强大脑:英国数学家查尔斯巴贝奇,他是可编程计算机的发明者,计算机的先驱。他设计过的计算机器有差分机、分析机和第二个差分机。差分机可谓是机械史最复杂的巅峰之作。在英…

mybatis-plus 会自动增加 order by_python自动撸支付宝基金答题红包

python自动撸支付宝基金答题红包背景在一个套利撸羊毛群里,一群小伙伴每天在不懈地撸支付宝的基金红包,于是自己也加入了撸红包大军。于是就重复地在不同的基金里面,看有没有答题红包,有的话就点进去,回答一个及其容易…

C# WPF文本框TextEdit不以科学计数法显示

01—前言一个float或者double类型的数值,如果小数点后0的个数≥4,在界面上就会自动以科学计数法显示,比如:0.00003会显示成这样但是很多时候我并不希望它这样显示,因为这样不方便编辑,和界面其它数据格式也…

php 获取浏览器时区,获取用户时区

噜噜哒这将使您将时区作为PHP变量。我使用jQuery和PHP编写了一个函数。这是经过测试的&#xff0c;而且确实有效&#xff01;在希望将时区作为变量的PHP页面上&#xff0c;在页面顶部附近有以下代码片段&#xff1a;<?php session_start();$timezone $_SESSION[time];…

女生说话都是加密的

1 年纪轻轻就能过肩摔普京了&#xff0c;真黑带九段&#xff01;&#xff01;&#xff01;2 第一次知道蒜苔本身是这个样子的。。3 一只来自四川的兔子。。4 不敢自己坐电梯的大宝宝5 去睡沙发吧&#xff01;这里没有你的位置了&#xff01;6 虽然是拒绝但这个回复很棒&#xf…

52Exchange 2010升级到Exchange 2013-升级SH站点Ex2010到2013

20、升级SH站点Ex2010到201320.1 准备Exchange服务器两台前端两台后端的标准架构&#xff0c;准备四台EX2013服务器&#xff0c;已经部署成功&#xff0c;安装方法不再赘述进入到EAC中&#xff0c;可以看到所有EX服务器&#xff0c;包括EX2010和EX201320.2 配置SH-Site前端NLB安…

一问就打鼓,一用就糊涂,是我小看它了

听过一个说法&#xff0c;“10 个程序员里&#xff0c;10 个都说学过网络协议&#xff0c;9 个都说懂网络协议。”&#xff0c;但事实上&#xff0c;能真正轻松应对各个大厂校招/社招相关问题的&#xff0c;可能也就两三个。网络协议的不少问题都给人一种似懂非懂的感觉&#x…

Visio工具 UML的建模

&#xff35;&#xff2d;&#xff2c;描述模型的内容有三种 分别是  事物、关系和图事物有&#xff1a;类&#xff0c;接口&#xff0c;用例&#xff0c;组件&#xff0c;结点&#xff0c;交互&#xff0c;包&#xff0c;注释等类&#xff1a; 类分为三部分&#xff0c;顶部…

php获取qzonetoken,QQ一键登录实现

首先&#xff0c;登录QQ互联平台获取QQ一键登录所需的Appkey和Appsecret。2、下载QQ登录用的SDK软件包&#xff0c;可以上QQ互联官方网下载。这里用的是Connect_PHP_SDK_for_OAuth2_V1.1.zip3、在登录页面放置QQ登录的图标。如functiontoQzoneLogin(){varAwindow.open("oa…

生物系统学中的进化树构建和分析R工具包V.PhyloMaker2的介绍和详细使用

V.PhyloMaker2是一个R语言的工具包&#xff0c;专门用于构建和分析生物系统学中的进化树&#xff08;也称为系统发育树或phylogenetic tree&#xff09;。以下是对V.PhyloMaker2的一些基本介绍和使用说明&#xff1a; 论文介绍&#xff1a;V.PhyloMaker2: An updated and enla…

互联网加大赛历届作品_匠心筑梦 ——家具漆服务系统2020年度涂装大赛成功举办...

时进九月&#xff0c;秋分将至&#xff0c;天气逐渐微凉&#xff0c;展辰新材家具漆2020年度涂装大赛进入最终评审阶段。大赛历时3个月&#xff0c;国内5大区域一百多位技术能手提交了参赛作品&#xff0c;经过层层筛选&#xff0c;最终入围作品175件&#xff0c;是历届参赛作品…

面对女人的喋喋不休时,男人内心的真实想法

1 笑而不语2 击了掌你就是我的狗了。。。。3 每次看猫咪背对着自己舔毛&#xff0c;总有一种饿的感觉。。4 你看对面的那个小朋友可不可爱&#xff0c;快去抱抱他~5 猫咪三明治&#xff0c;感觉很好吃的样子&#xff01;6 看剧的时候真的不能开弹幕&#xff01;你点的每个赞&am…