试谈web前端

导语:

对大前端工程师来说,这是最好的时代。文中多处引用牛人博客观点,重在分享,见谅见谅~

一,认识前端

WEB编程语言,分为WEB静态语言和WEB动态语言,WEB静态语言就是通常所见到的超文本标记语言 ,WEB动态语言主要是ASP,PHP,JAVASCRIPT,JAVA,CGI等计算机脚本语言编写出来的执行灵活的互联网网页程序。
Web前端开发工程师是一个很新的职业,在国内乃至国际上真正开始受到重视的时间不超过10年。Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。

最早的软件都是运行在大型机上的,软件使用者通过“哑终端”登陆到大型机上去运行软件。后来随着PC机的兴起,软件开始主要运行在桌面上,而数据库这样的软件运行在服务器端,这种Client/Server模式简称CS架构。

随着互联网的兴起,人们发现,CS架构不适合Web,最大的原因是Web应用程序的修改和升级非常迅速,而CS架构需要每个客户端逐个升级桌面App,因此,Browser/Server模式开始流行,简称BS架构。

在BS架构下,客户端只需要浏览器,应用程序的逻辑和数据都存储在服务器端。浏览器只需要请求服务器,获取Web页面,并把Web页面展示给用户即可。

当然,Web页面也具有极强的交互性。由于Web页面是用HTML编写的,而HTML具备超强的表现力,并且,服务器端升级后,客户端无需任何部署就可以使用到新的版本,因此,BS架构迅速流行起来。

Web应用开发可以说是目前软件开发中最重要的部分。Web开发也经历了好几个阶段:

静态Web页面:

由文本编辑器直接编辑并生成静态的HTML页面,如果要修改Web页面的内容,就需要再次编辑HTML源文件,早期的互联网Web页面就是静态的;

CGI:

由于静态Web页面无法与用户交互,比如用户填写了一个注册表单,静态Web页面就无法处理。要处理用户发送的动态数据,出现了Common Gateway Interface,简称CGI,用C/C++编写。公共网关接口编辑
公共网关接口(Common Gateway Interface)为web服务器定义了一种与外部应用程序交互、共享信息的标准。
CGI的工作原理
客户端浏览器向WEB服务器提出服务请求并显示服务器传递过来的结果。WEB服务器将客户请求正确映射传递给CGI接口程序,在将CGI的执行结果传递给客户端的浏览器。CGI接口负责处理WEB服务器传递过来的客户服务请求。

CGI的作用

  • 扩大了WEB服务器的功能;
  • 它打破了服务器软件的局限性,允许用户根据需要采用各种语言去实现无法用HTTP、HTML实现的功能,给WWW提供了更为广阔的应用空间;
  • 为在不同的平台之间进行沟通提供了范例。

连接服务器与外部应用程序。服务器可以向CGI程序发送信息,CGI程序也可以向服务器程序回送信息。

ASP/JSP/PHP:

由于Web应用特点是修改频繁,用C/C++这样的低级语言非常不适合Web开发,而脚本语言由于开发效率高,与HTML结合紧密,因此,迅速取代了CGI模式。ASP是微软推出的用VBScript脚本编程的Web开发技术,而JSP用Java来编写脚本,PHP本身则是开源的脚本语言。

MVC:

为了解决直接用脚本语言嵌入HTML导致的可维护性差的问题,Web应用也引入了Model-View-Controller的模式,来简化Web开发。ASP发展为ASP.Net,JSP和PHP也有一大堆MVC框架。

目前,Web开发技术仍在快速发展中,异步开发、新的MVVM前端技术层出不穷。

Python:

Python的诞生历史比Web还要早,由于Python是一种解释型的脚本语言,开发效率高,所以非常适合用来做Web开发。
Python有上百种Web开发框架,有很多成熟的模板技术,选择Python开发Web应用,不但开发效率高,而且运行速度快。

二,学习前段

基础学习:

  • HTML
  • CSS
  • JavaScript
  • jQuery
  • 学习如何编写可阅读的代码
  • 深入学习JavaScript:当每周我们有一个比任何旧框架更好的新框架的时候,这时会非常容易花费你的大部分时间去学习框架而不是语言本身。假如当你正在使用一个框架,但是并不理解它的工作原理,那就停下来并开始学习语言直到理解如何使用工具去工作。
  • 学习函数式编程:多年以来,我们想要在JavaScript中使用类,现在我们终于有了类但是再也不想使用它了:函数就是我们想要的一切!我们甚至用函数编写HTML(JSX)
  • 学习设计基础
  • 学习如何与人合作
  • 学习如何为人写作

进阶学习:

Web 框架上,从 Google 查询关键字的大势看,jQuery 时代已慢慢离我们而去。Web 前端框架已基本三足鼎立,分别是 React / AngularJS / Vue。不管是 Web,还是客户端,都不同程度遇到业务越来越复杂,代码量越来越大,编译性能越来越慢的问题。Web 开发中,Node.js已在驱动前后端的再分工,这已是事实。跨端技术今年已不再去谈论 Hybrid 技术了。离线化、差量更新、Web 与端互调等能力已不是什么新鲜事,说明混合开发已基本成熟,在各大厂均有较为广泛的使用,如果还没做的,也在补齐当中。新的技术是:React Native、Weex,还有 PWA、小程序,甚至还有 Electron。

三,前景

  • iOS 动态插件化技术。特别是 iOS 上的插件化技术期待能够得到更大的发展,来解决目前发版效率与包大小问题。
  • Google 一边是 Chrome 的 Web,另一边是 Android 的 App,我很期待的是 Chrome 与 Android 融合之后对开发的影响。
  • Web 框架层面明年难有创新,中期还仍是 React/AngularJS/Vue 三驾马车的技术栈体系,但我仍期待是否有超越 React 的模板/框架思路。
  • HTTP 到 HTTPS 的更替将会推动 HTTP 2 的使用。让 Web 页面性能十年以来以请求数为首要基准成为过去式。为应对 HTTPS,部分云计算厂商可以提供整套移动端商业解决方案,如:长链透传收费服务和 HTTPS 套装。
  • 跨端上 React Native 与 Weex 着重于解决跨端技术问题,并不能给开发者带来实实在在的收益。PWA 还谈之过早,所以我更看好小程序未来的发展,并不是技术上现在有多牛,而是在微信它是能给个人开发者和 Web 从业者带来就业机会与收益的最佳方式。脑洞大一点的看,支付宝、Facebook、小米是否也会会推出自己的「小程序」场景呢?是件令人期待的事。

最后,H5

一、移动优先;

二、游戏开发是重要领域;

三、响应式设计:

在HTML 5真的改变移动开发平台之前,必须要迈出重要一步,那就是“响应式设计”,也就是屏幕可以根据内容而自动调整大小。然而响应式设计也是一件非常不容易的事情,因为当今各式各样的设备实在是让开发者眼花缭乱,手足无措。要想做好响应式设计,就必须洞悉内容与屏幕之间的反馈关系,响应式设计要完全离开“流”,转而注重内容是如何在网页和移动设备中被处理的,这一过程还在继续,HTML 5会让它最终成为可能。

四、设备访问;

五、离线缓存。

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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,646评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,973评论 25 707
  • 0 系列目录# WEB请求处理 WEB请求处理一:浏览器请求发起处理 WEB请求处理二:Nginx请求反向代理 本...
    七寸知架构阅读 13,933评论 22 190
  • 你问我看到了什么 我说我看到了阳光、原野和远处的村庄
    九阁阅读 74评论 0 1
  • 开海的日子 已经进入倒计时 别只顾着兴奋 青岛码头那么多 选择适合自己需求的码头 选择更肥美的海鲜 才是重点呢 所...
    U涉生活阅读 1,146评论 0 1