精华内容
下载资源
问答
  • 前端行为日志技术架构漫谈 1. 什么是行为日志 2. 行为日志可以解决什么问题 2.1商业价值挖掘 2.2安全风控检查 银行、金融机构需要更详尽的数据来判断一个用户是否有风险,特别是在目前黑产行业猖獗,技术迭代越来越...

    前端行为日志技术架构漫谈

    1. 什么是行为日志

    1. 在久远一些的B/S框架(Browser、Server)以及现在C/S框架(Client、Server)中,商业公司对于用户的各种行为以及背后所隐含的数据价值极为感兴趣。
    2. 每一次用户在浏览器、app上的动作都能产生一条数据,而这些操作如浏览、点击、滑动及其所代表的如浏览商品、打开新页面、下单、支付、收藏等业务性行为都能为公司分析用户行为,进而优化整个行为链条带来精准的数据支撑。例如业内有公司针对行为数据分析让支付成功率提升6–7倍,带来的商业价值无法估量。
    3. 经过授权后,浏览器或者app采集用户的各类数据。
    • 软件数据,划分现成数据和需要实时采集的数据。现成数据常见如通讯录、相册、SD卡中文件等等;实时采集数据如用户的一次点击、收藏、滑动、进入app前台、切换到app后台、杀死app、浏览器关闭tab、打开新的页面等等。采集这些动作以及背后所代表的业务信息。
    • 硬件数据,主要是各类传感器的数据,GPS、陀螺仪、IMEI、手机型号、CPU、内存、磁盘容量、网卡、屏幕尺寸、屏幕分辨率、摄像头型号和分辨率等等

    2. 行为日志可以解决什么问题

    2.1商业价值挖掘

    1. 在目前激烈的竞争下,一款软件产品不可能等到所有功能开发完成,而是先根据产品定位,开发出主要功能,然后投入时常。之后根据市场、用户反馈、用户数据分析进行迭代和改进。这里行为日志起到一个产品优化数据支撑的作用。
    2. 当用户数达到一定规模后,这时候就可以从用户行为数据以及背后的规律进行分析,提炼出高价值信息。简单如用户分类、用户关联、商品关联、价格动态设定等等。就是根据不同时期、不同区域、不同用户群在不同场景下的行为数据以及所代表的趋势进行分析和设定。
    3. 上述说的,更简单一些,如不同用户群体,面对同一产品价格敏感度不一,有些用户可能贵1块钱,就不会从商品详情页去支付页下单购买,有些用户无明显变化。这时候就可以从用户行为数据中分析出对价格敏感度不一的用户群体。

    2.2安全风控检查

    1. 银行、金融机构需要更详尽的数据来判断一个用户是否有风险,特别是在目前黑产行业猖獗,技术迭代越来越快情况下,很多用户可能都是群控软件操作的机器人用户。
    2. 安全软件机构,需要通过采集行为数据,判断一个用户的行为和实际遭受的攻击是否是有意还是无意,进而来筛选肉鸡、攻击者等。这个相对更小众,但作用更大,属于互联网的防火墙级别。国内360就有使用各种大数据技术来分析用户的行为日志数据,各类安全机构也有采用大数据技术做分析。
    3. 政府结构,针对敏感区域的用户行为日志做采集和分析,这个更敏感。提一下就可以了,有兴趣,大家去各类大公司或者安全部门进一步学习和了解。

    2.3用户行为监控(主要用户安全应用,相对小众很多)

    众所周知,或者假装不知。我们的手机是有很多传感器的,如麦克风,摄像头、GPS、陀螺仪、光线、距离、重力、加速度、磁场、指纹、气压、霍尔、心率等等。并且传感器随着手机功能完善,有越来越多的趋势。

    1. 简单如地理位置监控,直接定时上报手机所在的gps,可以看到手机以及手机携带者的地理位置信息从而进行监控
    2. 目前黑产行业中,群控软件众多(使用电脑软件批量操控或者单独操控某一台手机),这时候就可以采集如陀螺仪、加速度、重力、心率等等传感器数据。因为群控下的手机,一般都不会怎么移动,这时候就可以判定这台手机可能是一台黑产手机,从而在安全策略上进行拦截。据说这方面国内阿里巴巴做到全球顶级水平
    3. 直接基于手机端进行手机数据采集和分析,这方面国内的几个安全软件厂商最有发言权。如某数字安全厂商,技术确实很厉害,可以在手机端就对采集的用户行为数据做分析和处理。

    3.行为日志如何实现

    3.1 行为日志采集数据分类

    从手机端可以采集的数据,按照各种标准都可以分类。我这里简单按照软件、硬件、实时行为三个维度分类

    1. 软件数据,
    • 通讯录、
    • 相册、
    • 操作系统信息(软件版本、厂商、内核、安装了哪些app、用户的app使用频次等等)
    1. 硬件数据,
    • 传感器数据如陀螺仪、重力计、加速度计等
    • 硬件信息如手机分辨率、屏幕尺寸、摄像头信息、电池容量、制造商等等
    1. 实时行为信息
    • 用户行为产生的信息,如app启动、打开、页面浏览、按钮点击、滑动、页面停留(曝光)等等

    3.2 行为日志采集的整体架构

    在这里插入图片描述
    注意

    • 在采集行为日志过程中,数据并不是一开始就导入到最终数据库,而是有一个前期的预处理过程。例如字段缺失(不严重的字段补齐,严重的丢弃)、信息校验(防止数据篡改等问题)、数据拼接等等。
    • 当数据进行预处理之后,才会流入到下一个真正的分析和处理环节。行为日志大部分场景都对实时性要求不高,属于离线分析。但目前由于黑产行业技术升级,利用行为日志产生的实时数据做用户行为和风控判断开始增加,行为日志的实时处理以后会逐渐增多。

    3.3行为日志采集的前端实现架构

    在这里插入图片描述

    • 注意,一般都是混合上述的几种方式进行实现,对时间敏感度高的,直接不缓存上传,不敏感的,为了不丢失,一般会做持久化处理。
    • 如果需要进一步优化,在本地磁盘文件中,再做数据淘汰和数据采样,这样可以降低行为日志总量而不会显著降低行为日志质量和数据失真。具体可以参考美团、头条的行为日志实现细节。
    • 前端数据采集,一般是分为几个段的数据,固定信息段如手机型号、系统版本等等;动态信息段如传感器数据、用户授权状态如是否授权获取通讯录、相册、GPS等;业务行为数据段如浏览了某个页面、点击了某个按钮;校验信息段,为了防止数据被篡改,一般会对数据做校验。这一点对于利用行为数据做风控和安全的场景更普遍,一般化场景不会做很严格的行为日志校验。需要校验也只会对部分数据做校验来降低性能开支。
    • 数据篡改,这里可以简单提一下。
    1. 在iOS和安卓中,uuid的获取和计算不一样,同时还需要考虑软件卸载后再次安装需要确保uuid不变
    2. 直接明文传输uuid,还不针对uuid做真实性校验,最终就是被拦截https,然后直接被黑产刷崩。
    3. 所以前端行为日志最关键一环就是设计好数据防篡改机制,其中最重要一环就是uuid的设计。
    4. uuid的设计,一般采用密文传输,uuid本身需要持久化到手机上。同时需要保证uuid的随机性。
    5. uuid本身需要能够被加密和解密,这样就算外部篡改了密文,还是可以被识别出来是黑产的操作。
    6. 当uuid能够被保护不被篡改,黑产需要防止被风控系统识别出来是同一台手机多账号操作的化,就只能采取刷系统或者root后还原系统或者采取更高级也更高难度的数据传输破解或者软件app砸壳
    7. 当以上步骤都实现好,剩下能够对前端业务造成困扰的黑产就都是高技术支持的黑产,需要想其他办法来分辨和应对。本文提到的,也是阿里巴巴采用的就是行为日志实时风控机制,既可以保证用户体验,也可以保证安全性。

    3.4行为日志采集的后端实现架构

    在这里插入图片描述

    • 注意,日志采集初步存放,一般是放在日志文件服务器集群中(应对海量的初始日志文件)
    • 初始文件存放后,基于预期目标,对数据进行预处理,也就是常说的ETL,提取、转换、加载。简单说就是数据缺失的、异常的、篡改的、需要进行字段拼接等操作的都在这一步处理。这样可以很好提升数据质量,降低日志服务器中数据总量。
    • 数据分析阶段,一般采用大数据处理技术,如果是OLAP场景,则可以使用多种OLAP引擎方案如Click house、Impala等等。如果是需要特性化处理,就需要使用spark、flink或其他数据分析技术。

    3.5行为日志采集后的处理和分析

    4. 行为日志优缺点

    优点:

    1. 实时产生,和用户行为、业务行为密切相关。可以很好反应用户的实际动作和状态
    2. 字段信息丰富,得益于手机操作系统开放的api,可以拿到用户的很多信息,从而有更多信息维度来分析和处理用户行为以及背后代表的业务流程
    3. 采样频率可控,如果需要更密集的信息频次,可以控制采样频率,这样数据更密接,也更接近真实。

    缺点:

    1. 数据量大,因为实时产生,对数据存储、处理都提出了挑战。
    2. 数据价值密度低,需要专门的技术处理才能提取出有效信息
    3. 由于手机系统型号,版本差异,需要的字段在不同手机上并不一致,缺失和补齐问题较多
    4. 占用用户手机上行带宽和存储空间,会一定影响用户体验
    5. 涉及法律法规隐私问题,国内逐步加强管控,国外直接罚款和下架,这一点是出海的app需要极其极其小心应对的 。

    5.行为日志风险项

    1. 法律风险,目前各个国家包括我国,对于用户隐私数据越来越看重,就算使用各种手段获取了用户的授权,随意采集并且滥用用户数据,也会有很大法律风险。这一点在出海的app应用上更明显
    2. 用户流失,随着用户隐私意识越来越高,对于随意采集自己个人信息的行为容忍度下降,会导致用户流失风险
    3. 数据泄露风险,由于采集的数据较多,一旦发生安全事故,导致数据泄露。例如采集的图片、音频、文字信息泄露,会导致用户在互联网上的行为对所有人都是公开开放的,有很大隐患。
    展开全文
  • 大家好,我是玄铁 ,现已工作8年,现在在一线互联网公司担任前端架构师,负责系统架构、性能优化,规范、工程化建设,前端组内的技术分享、人才培养等工作, 技能:熟练HTML5/CSS/ES6/Nodejs/Webpack等web主流技术等...

    大家好,我是玄铁 ,现已工作8年,现在在一线互联网公司担任前端架构师,负责系统架构、性能优化,规范、工程化建设,前端组内的技术分享、人才培养等工作,

    技能:熟练HTML5/CSS/ES6/Nodejs/Webpack等web主流技术等。

    熟练掌握React或Vue框架,熟悉框架相关技术生态等。

    熟练配置项目脚手架,熟悉grunt, gulp, webpack, parcel等工具。

    你想不到我都应该了解一点。

    前端架构师的由来:

    前端工程师的诞生, 就源于 web 开发这个问题规模的膨胀, 早期的网络程序员, 和现在的全栈工程师具有类似的属性, 唯一的区别是处理问题的规模相差极大, 在使用 jsp, asp 编写网页的年代, web 开发在页面端需要处理的问题规模极小, 不考虑 UI, 交互等用户体验的场景下, 仅仅是数据的呈现载体, 通过简单的模板绑定数据, 服务端渲染既可解决问题, 而且彼时, 数据库也仅仅是数据库, 高并发, 集群, 大数据, 云计算, 也仅仅是概念, 并未像现在这般大规模应用.

    为了解决日益膨胀的 web 开发中"端"的问题, 前端工程师就诞生了, 在这个逐步发展的过程中, 前后端的职责也日益清晰, 不再混沌. 然而互联网发展速度之快, 超乎人们的想象, 前端开发问题的膨胀速度同样惊人, 堆砌的业务逻辑和复杂多元的技术栈体系以及不统一的工程体系加上 js 灵活的语言特性, 促使前端开发这个问题的规模以惊人的速度膨胀, 以至于前端工程师调侃自己是 “重做工程师”. 于是顺理成章的, 前端架构师就诞生了

    在前端开发的早期, 架构是一种非常隐晦的概念, 原因在于前端开发的问题规模较小, 在 JQuery 大行其道的年代, 基于 JQuery 的插件式架构, 基本是所有前端应用的默认模式, 即便加上 Backbone 带来的 MVC, 背后的架构也是趋同的. 而此时, 前端还不直接处理业务, 大多是实现一些视觉和交互上的效果, 通过上网扣 JQuery 插件就能很好的解决问题. 然而这种状况随着前后端分离的兴起, 很快被打破, 从 angular1.0 到 React, 从 browserify 到 npm, 从 requireJS 到 es6Module, 前端的发展突然加速, 令人目不暇接, 技术更替的周期越来越短. 在这种环境下, 前端工程师无心梳理应用中的架构, 埋没在技术更替和业务迭代之中, 而背后的架构模式, 在不同的技术体系组合中也开始四分五裂. 管生不管养的业务代码成了摧毁应用架构的最后一根稻草.

    " 这代码不重构, 根本改不动! "

    " 这代码就像一坨屎, 谁写的? "

    " 卧槽, 根本理不清这业务逻辑. "

    一时间, 重构 && 重做成了解决问题的银弹, 然而真的是如此么? 且不说重构带来的技术风险, 使用新技术重构老代码实际上是借助一些库背后所隐藏的架构模式来解决现有架构上的混乱, 然而就跟盖房子和装修一样, 即便房子的户型做得再好, 硬件设计的再妙, 住进去的人一样能把你好好的房子搞的一团糟, 在技术上你即便用了 React 或者 Vue 全家桶, 我敢说迭代个七八次, 代码一样能乱的你爹妈都分不清.

    如果作为 TL, 你对以上这些深有同感, 那你可能就需要给你的团队配一名前端架构师,

    如果作为资深工程师, 你对以上这些深有同感, 或许你该考虑转职成一个名前端架构师.

    所以为什么要有前端架构师? 因为问题太多, hold 不住啊!

    前端架构师的职责

    没有文档的代码 = 放弃治疗

    作为前端架构师, 首先要解决的问题就是让日益膨胀的代码可控,因此你需要 梳理代码, 建立架构, 组织文档, 管理架构的更新和维护, 评审技术方案对架构的影响, 核心模块的方案设计, 重点项目的方案设计, CodeReview 等.

    架构师和资深开发在工作职责上有着明确的界限, 在一个没有架构师的团队, 每一个资深开发或多或少都承担了一部分架构的工作, 但都是破碎的, 不成体系而且不统一, 从某种意义上讲, 这种隐晦的架构还不如没有架构. 所以确立一名架构师, 从管理上也是将混乱统一的唯一途径, 在团队还小的时候, TL 可能会默认承担架构师的角色, 但团队规模增长到一定程度, TL会变得力不从心起来, 将工作分给专业的人, 永远都是工程上自然而然的结果.

    相比实际的 coding, 用一段代码解决某个问题, 实现某个需求, 架构要复杂和烧脑的多, 本质上工程的问题, 只能用架构解, 而没法用代码解, 所以没有架构, 谈不上工程化. 因此架构师的第一要务, 是梳理代码确立架构

    把前端架构立起来

    在立起来之前, 我们首先要明确, 树立前端架构的作用, 当你担负起架构师的职责, 你可能首先面对的就是代码, 各种老代码, 我们着手去树立前端架构, 本质上就是要将代码隔离在各自的区域之内, 为接下来的工作打下基础.

    因此第一步, 我们先要找出所有属于你团队的代码, 大到 git 仓库, 小到某段逻辑, 事无巨细, 我们把这个工作可以称为 “技术资产盘点”.

    等盘点清楚了技术资产, 就是第二步, 编写资产白皮书, 以文件为单位把所有的技术资产说清楚, 每个文件都是干嘛的, 资产白皮书非常重要, 这个将是你日后架构维护工作的核心.

    第三步, 手上有料, 事情就好办了, 文件已经说明了解决的问题, 按照问题域和技术域, 对文件进行归类, 最后得到的就是现状, 99%的情况下, 现状都应该让你沮丧, 因为看起来就是一坨 shit. 但是这就是你要面对的 “shit 架构”.

    接下来考验架构设计能力的时候到了, 把 “shit 架构” 画成你心中的架构, 两者之间的路线图, 结合现状, 结合业务, 结合团队, 做出迁移的方案, 这些都做完, 你就成功的把前端架构给立起来了, 这个过程中你可能不需要写多少代码, 你要完成的都将是新架构中的核心功能的代码.

    前端架构就是你的孩子, 你要保护他

    如今你眼前的架构看起来应该不错了, 作为架构师你的职责就是保护他, 在你没有想到什么金钟罩之类的秘籍之前, 你只能用你的肉体了, 自己设计技术方案, 或者参与技术方案的评审, 在 CodeReview 中找出任何可能污染架构的代码, 总之你的核心工作是, 确保代码和架构设计之间的联系的真实性, 这部分工作往往体现在你如何高效的维护文档和 CodeReview, 这里有个小提示, 你的架构设计的越棒, 这部分工作就越轻松, 如果这部分工作让你疲惫不堪, 那你可能需要重新审视你的架构设计了. 另一部分来自于外部, 毕竟 CodeReview 是最后的保障手段, 但真正的防御应该是在设计之初, 任何对架构的修改, 在设计阶段就应该被你的火眼金睛察觉到那些不好的味道, 然后通过修改, 隔离等各种方式防止对架构的破坏和污染.

    总之, 保护好你的架构, 无论他有多烂, 总比没有强, 等你的架构变得健壮而灵活, 带给团队的收益将远超你的想象.

    在其位,谋其政,站在架构师的职位上,架构师要本着对团队支持、对系统负责,对领导和业务相关方充分沟通与建议的基本准备,充分利用自身的经验与阅历,帮助团队规避各类或深或浅的系统之坑陷,保证业务线的正常运转,同时保持系统具备一定的灵活性、稳定性和可持续开发性。 尽人事,知天命,有所为,有所不为,架构师其实是技术、业务、管理和资源等各类因素之间进行妥协、沟通和协调的角色,混很容易,做好很难。

    前端图谱:

    展开全文
  • 互联网大流量的方法 安全秘籍 阿里巴巴常用小框架 架构方法论图谱 设计模式秘籍图谱 JVM垃圾回图谱png Java并发图谱 Java集合图谱 Java集合类图 JavaList类图 JavaMap类图 JavaSet类图 Hadoop技能图谱 大数据技能...
  • 前端架构前端工程化

    万次阅读 多人点赞 2018-01-31 10:49:28
    前端架构: 1.前端工程化 web应用复杂度的增加,特别是单页面应用的风靡。组件化,工程化,自动化成了前端发展的趋势。或者说一线的互联网公司就是这么做的。 每个前端团队都在打造自己的前端开发体系,这通常是一个...

    前端架构:

    1.前端工程化

    web应用复杂度的增加,特别是单页面应用的风靡。组件化,工程化,自动化成了前端发展的趋势。或者说一线的互联网公司就是这么做的。
    每个前端团队都在打造自己的前端开发体系,这通常是一个东拼西凑,逐渐磨合的过程,在技术发展日新月异的今天,这样的过程真的是不可抽象和复制的么?本文希望能够通过系统的拆解前端开发体系为大家提供体系设计思路参考。

    前端工程的3个阶段


    第一阶段: 库/框架选型


    Animate.css 
    jQuery 
    vue.js 
    underscore.js 
    React.js 
    Backbone.js 
    Bootstarp 
    zepto.js 
    jade 
    normalize.css 
    compass 
    Angular.js 
    解决开发效率


    第二阶段: 简单构建优化


    选择构建工具,对代码进行压缩,校验,之后再以页面为单位进行简单的资源合并。


    第三阶段: JS/CSS模块化开发


    解决维护效率 
    js的模块化方案 
    ADM/CDM/UMD/ES6 Module


    css的模块化:less,sass。


    第四阶段: 前端是一个技术问题较少,工程问题较多的开发领域


    当我们要开发一款完整的Web应用时,前端将面临更多的工程问题,比如: 
    - 大体量:多功能、多页面、多状态、多系统; 
    - 大规模:多人甚至多团队合作开发; 
    - 高性能:CDN部署、缓存控制、文件指纹、缓存复用、请求合并、按需加载、同步/异步加载、移动端首屏CSS内嵌、HTTP 2.0服务端资源推送。


    组件化开发和资源管理


    组件化开发: 
    光有JS/CSS的模块化还不够,对于UI组件的分治也有着同样迫切的需求
    资源管理: 
    根据“增量”的原则,我们应该精心规划每个页面的资源加载策略,使得用户无论访问哪个页面都能按需加载页面所需资源,没访问过的无需加载,访问过的可以缓存复用,最终带来流畅的应用体验。
    由增量原则引申的前端优化技巧成为了性能优化的核心: 
    按需加载 
    延迟加载 
    预加载 
    请求合并


    浏览器的缓存


    静态资源管理系统 = 资源表 + 资源加载框架


    前端模块化框架肩负着模块管理和资源加载2个重要的功能


    webpack已经成为了前端打包构建的主流。


    开发框架则是形成了三国时代: 
    React , Vue, Ng


    移动端也以混合开发为主的方式,Native嵌入了Webview页面。


    SPA依靠首次加载的Loading动画,来掩盖一些页面加载性能的问题。


    用户验证问题,怎么来确认Native的用户身份,是用原来Web网站常用的session还是使用Native比较常用的token,但是不管用哪种,都需要Native帮忙来注入标识。


    前端业务重量化,场景多样化。 
    未来的趋势: 组件化。


    美团的工程化


    关于前端工程化,我看了美团团队的分享: 
    他们分享的前端化的实践总结: 
    1. 前端开发要自成体系,包括构建、部署及运维,不再和后端项目耦合,后端通过RESTful接口提供服务。 
    2. 避免重量级的框架,没有一个框架可以满足所有的业务场景。 
    3. 设计要分层,来应对需求和技术的变化。


    前端工程化项目分为3大模块: 
    1. Node服务,提供数据代理,路由,和服务器渲染,通过restful api和后端通信。 
    2. web应用开发,专注于web交互体验。 
    3. 前端运维:包含构建,测试,部署及监控等。


    Node服务:用于实现前后端分离,核心功能是实现数据代理中转,附带url路由分发和服务端渲染功能。
    Web应用开发:纯粹的前端模块,给予前端工程师极大的自由度进行技术选型,专注于Web交互体验的开发。
    前端运维:主要指前端项目构建和部署、工程质量(源码质量检查和测试等)及监控服务(日志、性能等)等工作。
    前后端分离: 
    - 为了前后端彻底的分离,引入Node服务层。 
    - 即在Node端通过HTTP请求得到数据后,Web端再通过Ajax的方式从Node端间接获取后端数据,Node服务起到“桥梁”的作用。 
    - 路由分发 
    - 服务器端渲染:Node服务端最后一个核心功能是渲染:输出 HTML Shell和 JSON。输出JSON字符串的用途是为了浏览器端能以Ajax形式动态获取数据,而输出的HTML内容则是我们Web应用的所需的HTML“壳子”。


    这主要是SPA的快速发展,前端的用户体验大幅提升。


    静态资源与Node端衔接: 
    - 前端静态资源构建工作与Node服务相互分离,Node服务在开启的过程中会读取前端构建生成的静态资源映射表。 
    - 静态资源映射表的生成: 
    - 预编译:ES6语法转义,css预编译器处理,源码质量审查,测试 
    - 模块依赖解析 
    - 压缩,静态资源版本号


    前端构建工具基本都提供静态资源映射表生成插件,比如构建工具Webpack就存在插件assets-webpack-plugin来实现该功能。


    鼓励遵循下面几条“约定”: 
    - Ajax请求从Node端代理,而非具体后端服务。 
    - 鼓励将JavaScript、CSS、HTML视为前端领域的“汇编”。 
    - 重视前端页面状态管理,推荐的方案有Redux、vuex及MobX等。 
    - 强调组件化,面向组件集开发。
    项目的脚手架,来搭建项目的开发环境。


    工程质量保证,在每次的commit,同个项目要求遵循同一套编码规范,并采用ESLint等工具进行约束,对于一些复用性高的核心组件也强制要求写测试。 
    甚至是接入单独的系统测试。


    总结


    前端工程化体系的引入,让前端开发能和原生App应用项目开发一样“自成体系”,脱离了对后端项目的依赖。基于“约定优于配置”、“按照约定写代码”的原则对Node层功能的设定能够降低沟通协调成本,构建、部署等工作的规范化,使前端技术人员的开发重点回归到Web应用的交互体验本身,回归到“纯粹”的前端研发。

    或许现在很多企业和团队尚未重视前端工程,或许前端工程在很多人眼里还只是“构建工具”的代名词,又或许未来前端领域的变革使得一切工程问题从根本上得到解决。不管怎样,我只是希望当下能认真的记录自己在前端工程领域的所见所想,与正在经历前端工程化改进,并被此过程困扰的同学交流心得。

    先说概念:前端工程化是使用软件工程的技术和方法来进行前端项目的开发、维护和管理(曾经的前端开发可不是这样的,不然为什么要说工程"化"呢?)。

    "前端工程化"里面的工程指软件工程,和我们一般说的工程是两个完全不同的概念。

    • 工程是个很泛泛的概念,你甚至可以认为建了个 Git 仓库就相当于新建了一个工程;
    • 软件工程的定义是:"应用计算机科学理论和技术以及工程管理原则和方法,按预算和进度,实现满足用户要求的软件产品的定义、开发、和维护的工程或进行研究的学科"(GB/T11457-2006《信息技术 软件工程术语》)。

    很多时候,我们的前端确实是个工程,但并不是在以软件工程的方式方法去对待它。

    为什么会出现"前端工程化"这个概念?

    • "这个活动页面,给张图切一下就行了嘛";
    • "这个管理后台已经通过 XXX 脚手架生成了,页面稍微改改就行";
    • ...

    前端的开发工作在一些场景下被认为只是日常的一项简单工作,或只是某个项目的"附属品",并没有被当做一个"软件"而认真对待(无论是产品负责人还是开发者)。

    然而无论你如何对待它,也无法否定前端是一种 GUI 软件的事实,因此其也就必然遵循时间、质量、成本相互制约的特性。对于时间和成本的控制必然将导致最终产出倾向于出现"质量低"、"可维护性差"、"可用性差"等问题。

    过去我们以牺牲质量的方式换取时间和成本,现在趟了前辈们早已趟过的坑,然后发现还是要重新审视"前端"这一软件开发活动,并且使用软件工程这套早已存在的体系去对前端项目进行管理。


    目前来说,Web业务日益复杂化和多元化,前端开发已经由以WebPage模式为主转变为以WebApp(eg:https://app.ft.com/)(httpshttps其实就是建构在SSL/TLS之上的 http协议,所以要比较https比http多用多少服务器资源,主要看SSL/TLS本身消耗多少服务器资源。)模式为主了。现在随便找个前端项目,都已经不是过去的拼个页面+搞几个jQuery插件就能完成的了。工程复杂了就会产生许多问题,比如:如何进行高效的多人协作?如何保证项目的可维护性?如何提高项目的开发质量?
    前端工程化是前端架构中重要的一环,主要就是为了解决上述大部分问题的。而前端工程本质上是软件工程的一种,因此我们应该从软件工程的角度来研究前端工程。那么前端工程化需要考虑哪些因素?本人总结经验,认为前端工程化主要应该从模块化、组件化、规范化、自动化四个方面来思考,下面一一展开。## 模块化简单来说,模块化就是将一个大文件拆分成相互依赖的小文件,再进行统一的拼装和加载。只有这样,才有多人协作的可能。### JS的模块化在ES6之前,JavaScript一直没有模块系统,这对开发大型复杂的前端工程造成了巨大的障碍。对此社区制定了一些模块加载方案,如CommonJS、AMD和CMD等,某些框架也会有自己模块系统,比如Angular1.x。现在ES6已经在语言层面上规定了模块系统,完全可以取代现有的CommonJS和AMD规范,而且使用起来相当简洁,并且有静态加载的特性。规范确定了,然后就是模块的打包和加载问题:1. 用Webpack+Babel将所有模块打包成一个文件同步加载,也可以打成多个chunk异步加载;2. 用SystemJS+Babel主要是分模块异步加载;3. 用浏览器的<script type="module">加载目前Webpack远比SystemJS流行。Safari已经支持用type="module"加载了。### CSS的模块化虽然SASS、LESS、Stylus等预处理器实现了CSS的文件拆分,但没有解决CSS模块化的一个重要问题:选择器的全局污染问题。按道理,一个模块化的文件应该要隐藏内部作用域,只暴露少量接口给使用者。而按照目前预处理器的方式,导入一个CSS模块后,已存在的样式有被覆盖的风险。虽然重写样式是CSS的一个优势,但这并不利于多人协作。为了避免全局选择器的冲突,各厂都制定了自己的CSS命名风格:BEM风格;

    Bootstrap风格;Semantic UI风格;我们公司的NEC风格;...但这毕竟是弱约束。选择器随着项目的增长变得越多越复杂,然后项目组里再来个新人带入自己的风格,就更加混乱了。所以我很赞同这句话:与其费尽心思地告诉别人要遵守某种规则,以规避某种痛苦,倒不如从工具层面就消灭这种痛苦。从工具层面,社区又创造出Shadow DOM、CSS in JS和CSS Modules三种解决方案。Shadow DOM是WebComponents的标准。它能解决全局污染问题,但目前很多浏览器不兼容,对我们来说还很久远;CSS in JS是彻底抛弃CSS,使用JS或JSON来写样式。这种方法很激进,不能利用现有的CSS技术,而且处理伪类等问题比较困难;CSS Modules仍然使用CSS,只是让JS来管理依赖。它能够最大化地结合CSS生态和JS模块化能力,目前来看是最好的解决方案。Vue的scoped style也算是一种。
    ### 资源的模块化Webpack的强大之处不仅仅在于它统一了JS的各种模块系统,取代了Browserify、RequireJS、SeaJS的工作。更重要的是它的万能模块加载理念,即所有的资源都可以且也应该模块化。资源模块化后,有三个好处:依赖关系单一化。所有CSS和图片等资源的依赖关系统一走JS路线,无需额外处理CSS预处理器的依赖关系,也不需处理代码迁移时的图片合并、字体图片等路径问题;资源处理集成化。现在可以用loader对各种资源做各种事情,比如复杂的vue-loader等等。项目结构清晰化。使用Webpack后,你的项目结构总可以表示成这样的函数:
    dest = webpack(src, config)## 组件化首先,组件化≠模块化。好多人对这两个概念有些混淆。模块化只是在文件层面上,对代码或资源的拆分;而组件化是在设计层面上,对UI(用户界面)的拆分。从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元,我们称之为组件。其实,组件化更重要的是一种分治思想。Keep Simple. Everything can be a component.
    这句话就是说页面上所有的东西都是组件。页面是个大型组件,可以拆成若干个中型组件,然后中型组件还可以再拆,拆成若干个小型组件,小型组件也可以再拆,直到拆成DOM元素为止。DOM元素可以看成是浏览器自身的组件,作为组件的基本单元。传统前端框架/类库的思想是先组织DOM,然后把某些可复用的逻辑封装成组件来操作DOM,是DOM优先;而组件化框架/类库的思想是先来构思组件,然后用DOM这种基本单元结合相应逻辑来实现组件,是组件优先。这是两者本质的区别。其次,组件化实际上是一种按照模板(HTML)+样式(CSS)+逻辑(JS)三位一体的形式对面向对象的进一步抽象。所以我们除了封装组件本身,还要合理处理组件之间的关系,比如(逻辑)继承、(样式)扩展、(模板)嵌套和包含等,这些关系都可以归为依赖。其实组件化不是什么新鲜的东西,以前的客户端框架,像WinForm、WPF、Android等,它们从诞生的那天起就是组件化的。而前端领域发展曲折,是从展示页面为主的WebPage模式走过来的,近两年才从客户端框架经验中引入了组件化思想。其实我们很多前端工程化的问题都可以从客户端那里寻求解决方案。目前市面上的组件化框架很多,主要的有Vue、React、Angular 2、我们公司 @郑海波 的Regular、Avalon等。你感兴趣可以都研究一下,选择一套中意的。其实Vue文档中的对比其他框架一文已经讲得很详细了。## 规范化模块化和组件化确定了开发模型,而这些东西的实现就需要规范去落实。规范化其实是工程化中很重要的一个部分,项目初期规范制定的好坏会直接影响到后期的开发质量。我能想到的有以下一些内容:目录结构的制定编码规范前后端接口规范文档规范组件管理Git分支管理Commit描述规范定期CodeReview视觉图标规范...其中编码规范最好采取ESLint和StyleLint等强制措施,配置git hooks可以实现Lint不过不能提交代码等机制,因为人是靠不住的。前后端接口管理可以了解一下我们公司出的NEI - 接口管理平台。## 自动化作了这么多年程序猿的我,一直秉持的一个理念是:任何简单机械的重复劳动都应该让机器去完成。
    所以我也认为,前端工程化的很多脏活累活都应该交给自动化工具来完成。### 图标合并不要再用PS拼雪碧图了,统一走Webpack吧;
    不要再用Icomoon了,统一走Webpack吧。### 持续集成### 自动化构建### 自动化部署### 自动化测试前端自动化测试能够提高代码质量、减少人肉测试等,这些优点是不言而喻的。市面上前端测试框架有很多,选择哪个都不会有太大问题,我们用的是:Karma + Mocha + Chai

    非要介绍的话,那前端工程化就是这些:
    1. 高性能
    2. 稳定性(reliability)
    3. 可用性(usability)
    4. 可维护性(maintainability)
    5. 可访问性(accesibility)

    每个前端团队都在打造自己的前端开发体系,这通常是一个东拼西凑,逐渐磨合的过程,在技术发展日新月异的今天,这样的过程真的是不可抽象和复制的么?本文希望能够通过系统的拆解前端开发体系为大家提供体系设计思路参考。什么是前端集成解决方案


    前端集成解决方案,英文翻译为 Front-end Integrated Solution,缩写fis,发音[fɪs]
    前端集成解决方案并不是一个新词汇,将这个词拆开来看,我们能得到:


    前端:指前端领域,即web研发中常用的浏览器客户端相关技术,比如html、js、css等
    集成:将一些孤立的事物或元素通过某种方式改变原有的分散状态集中在一起,产生联系,从而构成一个有机整体的过程。[1]
    解决方案:针对某些已经体现出的,或者可以预期的问题,不足,缺陷,需求等等,所提出的一个解决问题的方案,同时能够确保加以有效的执行。[2]
    总结来说,前端集成解决方案就是:


    将前端研发领域中各种分散的技术元素集中在一起,并对常见的前端开发问题、不足、缺陷和需求,所提出的一种解决问题的方案。
    前端领域有哪些技术元素


    前端行业经历了这么长时间的发展,技术元素非常丰富,这里列举出一般web团队需要用到的技术元素:

    开发规范:包括开发、部署的目录规范,编码规范等。不要小瞧规范的威力,可以极大的提升开发效率,真正优秀的规范不会让使用者感到约束,而是能帮助他们快速定位问题,提升效率。
    模块化开发:针对js、css,以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、api暴露、按需加载与执行、安全合并等问题,css方面解决依赖管理、组件内部样式管理等问题。是提升前端开发效率的重要基础。现在流行的模块化框架有requirejs、seajs等。
    组件化开发:在模块化基础上,以页面小部件(component)为单位将页面小部件的js、css、html代码片段放在一起进行开发、维护,组件单元是资源独立的,组件在系统内可复用。比如头部(header)、尾部(footer)、搜索框(searchbar)、导航(menu)、对话框(dialog)等,甚至一些复杂的组件比如编辑器(editor)等。通常业务会针对组件化的js部分进行必要的封装,解决一些常见的组件渲染、交互问题。
    组件仓库:有了组件化,我们希望将一些非常通用的组件放到一个公共的地方供团队共享,方便新项目复用,这个时候我们就需要引入一个组件仓库的东西,现在流行的组件库有bower、component等。团队发展到一定规模后,组件库的需求会变得非常强烈。
    性能优化:这里的性能优化是指能够通过工程手段保证的性能优化点。由于其内容比较丰富,就不在这里展开了,感兴趣的同学可以阅读我的这两篇文章 [1] [2]。性能优化是前端项目发展到一定阶段必须经历的过程。这部分我想强调的一点是 性能优化一定是一个工程问题和统计问题,不能用工程手段保证的性能优化是不靠谱的,优化时只考虑一个页面的首次加载,不考虑全局在宏观统计上的优化提升也是片面的。
    项目部署:部署按照现行业界的分工标准,虽然不是前端的工作范畴,但它对性能优化有直接的影响,包括静态资源缓存、cdn、非覆盖式发布等问题。合理的静态资源资源部署可以为前端性能带来较大的优化空间。
    开发流程:完整的开发流程包括本地开发调试、视觉效果走查确认、前后端联调、提测、上线等环节。对开发流程的改善可以大幅降低开发的时间成本,工作这些年见过很多独立的系统(cms系统、静态资源推送系统)将开发流程割裂开,对前端开发的效率有严重的阻碍。
    开发工具:这里说的工具不是指IDE,而是工程工具,包括构建与优化工具、开发-调试-部署等流程工具,以及组件库获取、提交等相关工具,甚至运营、文档、配置发布等平台工具。前端开发需要工具支持,这个问题的根本原因来自前端领域语言特性(未来我会单独写一篇文章介绍前端领域语言缺陷问题)。前端开发所使用的语言(js、css、html)以及前端工程资源的加载与定位策略决定了前端工程必须要工具支持。由于这些工具通常都是独立的系统,要想把它们串联起来,才有了yeoman这样的封装。前面提到的7项技术元素都直接或间接的对前端开发工具设计产生一定的影响,因此能否串联其他技术要素,使得前端开发形成一个连贯可持续优化的开发体系,工具的设计至关重要。
    以上8项,1-3是技术和业务相关的开发需求,4是技术沉淀与共享需求,5-8是工程优化需求。


    经过这些年的工程领域实践,个人觉得以上8项技术元素应该成为绝大多数具有一定规模的前端开发团队的标配。各位读者可以对照自己团队现状来思考一下团队开发体系还有哪些环节需要完善。


    攒一套前端集成解决方案


    不难发现,其实其他领域工程也基本需要解决上述这些问题。前端由于其领域语言的独特性,使得前端工程在解决这些问题上跟其他工程有很大区别,因此至今也没有形成一套比较好的理论体系指导团队实践前端工程。
    仔细观察过一些团队的技术体系形成过程,大家都在努力拼凑上述8项技术元素的具体解决方案。单独观察每一项技术点,你或许会觉得都能各自找到已有的实现,但我要说,把所有8项技术点无缝的串联起来,是一项非常有挑战的工作,你信么?相信真正经历过这样事情的同学能明白我说的串联成本问题。


    假设我们希望实践一套完整的前端集成解决方案,好了,如果我们单独去看每一项技术点,都可能会找来一两个现成的东西,假设我们东拼西凑的找全了所有8项技术要素对应的具体实现。接下来要用了,它们能很完整流程的跑起来么?


    正如前面的贴图展示的那样,所有的技术点都有一定的内在联系:


    模块化开发涉及到性能优化、对构建工具又有一定的配套实现要求,也会影响开发规范的定制
    组件化开发应该基于模块化框架来加载其他依赖的组件,如果组件化框架自带模块管理功能,那么就可能导致工程性的性能优化实现困难
    组件库应该与组件化开发配套,组件仓库中的组件都应该按照相同的标准来实现,否则下载的组件不具有可复用性、可移植性,就是去了仓库的意义
    我们设计的开发规范工具是否能很容易的实现,如果部署上有特殊要求,工具是否能很容易的做出调整,而不是修改规范。
    工具是否能提供接入公司已有流程中的接口,比如命令调用,如果工具需要一些系统环境支持,公司的ci流程中是否能支持等问题。
    前端领域语言的特点决定了攒一套集成解决方案有很高的实现成本。因为前端语言缺少包、导入、模块等开发概念,这使得各个技术点的解决方案在设计的时候都是考虑被独立使用的情况下如何工作,因此或多或少的会延伸自己的职责。比如模块化框架要附属构建工具,甚至要求后端服务(比如combo),组件化框架自带模块化框架,构建工具自带部署规范等,这就大大提高了将各个技术要素融合起来的成本。


    总之,前述的8项技术要素之间有许多联系,这就为打造一套完整连贯的前端集成解决方案带来了较大的挑战。如何兼顾规范、性能、框架、流程、部署等问题,就不是东拼西凑那么简单的事了。后面我会单独撰文介绍如何实现一套集成解决方案。

    1、关于组件化和模块化,这个粒度实在是不好拿捏,模块可以很大,也可以很小,小到一个函数成一个模块,所以我觉得模块应该主要是通用工具、api、类的封装,而组件更多的是业务功能、UI块的封装


    2、关于组件仓库,其实bower、component之类的并不够,还有文档的生成与管理,使用别人写的代码,最快入手的就是看文档,其次才是看代码


    3、还有,测试。纯工具和api之类的模块,很容易自动化测试,蛋是到了组件层面,设计业务逻辑、UI什么的,自动化太难了,还得靠人肉

    fis-conf.js所在目录即整个工程目录,所以如果整个目录下有很多文件,fis在构建的时候是会全部文件收集起来再作处理的,所以文件查找会成为时间大头。但一般情况下前端工程也不会出现个别多的文件,如果你的工程里混有一些非前端代码,比如nodejs的node_modules等,建议用 fis.config.set('project.exclude', /正则/); 来排除掉。


    当然,有些前端工程确实特别大,我们在百度的时候采用的做法是把一个网站的代码拆成多个子系统,每个子系统一个fis-conf.js,每个子系统一个svn仓库,子系统可以独立编译、独立上线发布。这样系统的并行开发程度就提高了很多。子系统中有一个特殊的子系统,叫公共资源子系统(common),其他子系统不允许有相互的资源依赖,只允许它们唯一依赖公共资源子系统。而依赖的功能是通过模块化框架实现的。


    全部放在一起也没有什么问题,就是构建速度差一些,代码合并会多一些,规模上会有一定的瓶颈。分开来也会有一些小问题,而且框架设计成本略高,有时候甚至要在后端模板层实现一套后端的模块化框架,略麻烦。


    你用的spmx是我之前一个下午随便搞的,不是很严谨,也没有充分考虑到seajs的设计理念,所以可能用起来效果稍差一些,如果有需要可以在spmx的issues里提,我尽量满足,或者给你们开权限,以及npm上的发布权限,如果可以将它发展成一个强大的解决方案,那真是一件非常不多的事情。

    关于前端工程的核心问题


    说的有点大,其实呢,前端工程只有两个核心问题:


    一个是 资源定位,另一个是 模块化开发。
    fis从你的描述中我已经感觉你们用的比较好了,这里我可以做一个总结和补充:

    前端工程的所有工作都是围绕着这两个核心问题展开的。资源定位的主要思想就是将 工程路径 转换为 部署路径,也就是把相对路径变成绝对路径并且加上md5戳和域名。这样做的目的是解决静态资源缓存更新的问题,同时为模块化开发这个问题做准备。因为只有将所有相对路径转换成绝对路径才能实现模块的独立性,模块才能被任何地方使用都不用担心里面资源加载的问题。你所喜欢的内嵌功能,也是要建立在路径转换的基础上,因为内嵌会改变路径关系,绝对化处理可以让任意文件间的内嵌成为可能。


    模块化开发呢,在解决了资源定位的前提下,核心问题就是依赖管理和加载了。fis最推崇的做法就是:


    尽量依靠框架实现,最少依赖构建工具处理。
    就是说,尽量不要让构建工具做太多事情,因为那很黑盒,fis的设计是,构建工具只负责生成依赖关系表,这就足够了,然后框架自己决定什么时候该加载哪些资源,表的关系可以让框架加载时完成按需、请求合并等需求。


    基于上述设计理念,能发挥fis最大价值的地方就在于如何利用静态资源依赖表来实现一个合理的模块化框架。
    spmx是我根据seajs的模块化设计而做的适配,其实可以更精简一些的。我到UC之后根据他们的业务特点与小伙伴 @hinc 又设计开发了一个模块化框架,并以此衍生出了一套解决方案,可以作为你们的参考。今年还做了一个分享,可以看看:

    前端工程可以在 前端开发,性能优化,持续集成,自动部署、模块生态、甚至 CMS运营系统 中都能发挥功效,其中CMS运营系统的前端工程化实践我们还在探索中,你可以看一下自己团队还有哪些需要补充。


    模块化框架和工具做好了之后,就在模块化框架里做性能优化,比如请求合并、按需加载、localstorage缓存(移动端)等,然后就是开发过程和持续集成与部署结合,内网搭建jenkins,提交即构建,构建结果存放到代码仓库 ,然后实现部署推送。接下来将历往项目中的通用模块抽取出来,放到生态里,比如GitHub上,然后在开发工具中集成一个install的小工具,用于项目初期获取这些模块,可以进一步提高效率。最常见的例子就是处理css合并了,css中经常会有图片资源的路径引用,如果保留相对路径,会对css文件合并带来很多负担。有这么几种情况:


    代码中使用相对路径,合并后不做任何路径处理。这种情况下,有两种开发模式:
    所有css在同级维护,构建中合并css,并且合并后的css也是同级目录。优点是不依赖工具,简单直观。缺点是不能把css和对应的html、js维护在一起,而且项目变大之后一个目录下都是css文件,又不能分二级,很恶心。
    所有css中写图片路径的时候,都是写那个合并后文件的相对路径。优点是css可以分级,但是写资源地址要时刻想着是在另外一个文件中使用的,这和写绝对路径有什么分别?而且IDE不友好,很多IDE会报错,别小看这个,很多程序员都是神经质,烦。
    代码中使用相对路径,合并后根据合并后生成的文件的位置做相对路径计算。解决了1.2中的问题,通过工具重新计算相对路径。缺点是同一个文件只能被合并,不能被其他方式复用,否则会带来相对路径不一致问题。而且这都用上工具了,为啥不直接转成绝对路径。
    代码中使用相对路径,合并后替换成绝对路径。先说缺点,依赖工具,没了。然后说说优点:
    开发中使用相对路径,各种直观与友好
    没有规范,组件任意移植,部署路径都能正确
    目录任意分级,可以实现完全的组件化/模块化开发
    有些时候,我们可能需要把css的文件嵌入到js中,通过js动态插入到页面上,或者嵌入到html的style标签中使用,转换成绝对路径永远不用担心资源找不到的情况
    combo随便,还是因为资源定位都是绝对路径。
    js也有相同问题,当你在js中想要通过逻辑加载一个图片、加载一个css文件,加载其他js文件的时候,使用绝对路径可以让这个js无论在哪个页面,无论在哪一级路径下都能正确运行,有百利而无一害。(其实路径会很长,算是一害)。


    有了绝对路径,资源的合并、复用、移动才能不被运行时的文档路径限制。我觉得,绝对路径才叫资源定位,才是真实的完整的定位信息,相对路径更像是一种“变量”,它使得同一段代码在不同的路径下执行会有可能发生定位错误。


    其实前端页面也是一种GUI软件,传统的桌面软件,所有程序资源都部署(安装)在客户端,所以从来没有在资源上遇到过想前端的这种的定位概念。前端程序资源是部署在其他设备上的,通过运行时加载到客户端来执行,这种程序资源部署上的差异我觉得正是前端工程与GUI软件工程的最大区别,几乎所有前端开发、维护、模块化、性能优化等特殊的工程问题都是围绕着这个差异点产生的。

    展开全文
  • 互联网电商系统架构技术

    千次阅读 2014-10-25 15:31:06
    前端:app,ios,html5 中台:商品,商家接口,huiyua

    前端:app,ios,html5

    中台:商品,商家接口,会员接口,订单接口


    未完。

    展开全文
  • 技术书籍:国内外国内外互联网技术大牛们都写了一些书籍:计算机基础,网络,前端,逐步,数据库,架构,大数据,深度学习。
  • 前端架构师的主要职责 前端架构师需要对架构落地的过程和目标进行管理,保证实现和设计的一致性。... 搭建公司产品前端架构,规范前端代码,跟踪前端技术发展方向,研究和掌握最新前端开发技术,帮助团队成员成长; ...
  • XX项目采用前后端分离技术前端采用目前最主流的vue框架,后端采用springboot+springcloud搭建分布式微服务 springcloud主要使用组建和功能如下: eureka:注册中心(非常好) zuul:网关(非常好) sleuth:...
  • 18年如何拓展前端知识架构

    千次阅读 2018-03-05 00:00:00
    2017年,互联网行业风起云涌,IT工程师如果仅凭传统开发思维,无法突破固有知识体系,终将会被社会所淘汰。...但是“几家欢喜几家愁”,不少同学困扰:我的前端开发技术不比别人差,为什么别人能进BATJ等一线大
  • 用户关注的常规社交功能、活动、地理位置、探索功能、新鲜事、视频照片分享等等,需要提供的功能不胜枚举,所以从技术角度来说,开发者需要解决的问题也是异常复杂的。 当一款社交App发布之初,用户访问量比较小,...
  • 在移动互联网,分布式、微服务盛行的今天,现在项目绝大部分都采用的微服务框架,前后端分离方式,(题外话:前后端的工作职责越来越明确,现在的前端都称之为大前端技术栈以及生态圈都已经非常成熟;以前后端人员...
  • 随着互联网的发展,前端优化越来越被人们重视,在一个大型的大型电子商务网站技术架构中,前端架构一定是一项必不可少的工作,国内几个大型的互联网公司也有非常强大的前端技术人员。在业界享有名气淘宝 UED 团队...
  • 作者: 未来本文转自互联网技术联盟(ITA1024)技术分享实录 正文如下 没有统一架构的时候是怎样的一种情况? 起初前端是没有架构的,大家只是在完成一个一个的页面。我们来看看会发生什么。 A同事是一个非常有意思...
  • 互联网公司组织架构

    2020-05-25 15:27:52
    2、技术线 (1)运维工程师 (2)前端工程师 (3)开发工程师 (4)测试工程师 (5)架构师 3、运营线 (1)内容策划 (2)活动策划 (3)数据运营 (4)产品运营 (5)会员经营 4、市场线 (1)渠道 (2)推广 (3...
  • 本人从事前端6年了,目前杂广州从事架构师。业余总结了很多学习资料,在不断总结的过程中提升自己的技术水平,跟进时代的发展,也想帮助更多想从事前端工作的朋友。本文我会普及一些入门和提升建议,思想提升了,...
  • 本文首发于 vivo互联网技术 微信公众号 ...作者:官网商城前端团队 【背景】 一年前 vivo 商城还是以 Java 为技术核心,前后台一起,Java 既要负责...前端技术架构繁杂且陈旧,导致迭代速度很难提升 到2018年12月.
  • 美团技术沙龙由美团技术团队主办,每期沙龙邀请美团及其他互联网公司的技术专家分享来自一线的实践经验,覆盖各主要技术领域。/出品人/王鹤,美团高级技术专家2013年加入美...
  • 网站架构-前端优化

    2015-10-25 12:12:30
    随着互联网的发展,前端优化越来越被人们重视,在一个大型的大型电子商务网站技术架构中,前端架构一定是一项必不可少的工作,国内几个大型的互联网公司也有非常强大的前端技术人员。在业界享有名气淘宝UED团队就有...
  • 前端请求过程是指用户和应用服务器之间发生...前端技术基本的架构与优化,主要是怎样让页面更快更好的展示在用户面前。 一、页面开发最佳实践 1.css样式置顶,Javascript脚本置底 样式表(css)放在网页的HEAD中会让网...
  • @李光毅,知乎专栏「前端技术漫游指南」以及图书《高性能响应式Web开发实战》作者。曾就职于爱奇艺、百度、知乎等互联网公司,目前就职于 ThoughtWorks,从事全栈开发相关工作。 1,理论性的讨论前端架构 前端架构...
  • 本文首发于 vivo互联网技术 微信公众号 链接: https://mp.weixin.qq.com/s/vD9yvYNaxTQBLABik6aqNg 作者:官网商城前端团队【背景】一年前 ...然而随着业务迭代的加快,前端技术的发展,这种开发模式的弊端越来越明...
  • 前端技术的发展非常迅速,特别是近年来各种框架如雨后春笋般不断出现,这些前端框架在数据绑定、模板渲染等方面做得非常优秀。专职的前端架构师能够应用好这些前端框架,基于PHP的服务端就可以专注于数据的后端处理...
  • 2016年3月,互联网技术联盟(ITA1024)推出前端技术专题月,由联盟成员企业推荐国内一流技术专家联手打造。通过每周的线上万人课堂和每月的线下ITA1024互联网技术大会,针对前端开发,前端框架,性能调优,复合型...
  • 1前端优化必要性随着互联网的发展,前端优化越来越被人们重视,在一个大型的大型电子商务网站技术架构中,前端架构一定是一项必不可少的工作,国内几个大型的互联网公司也有非常强大的前端技术人员。在业界享有名气...
  • @李光毅,知乎专栏「前端技术漫游指南」以及图书《高性能响应式Web开发实战》作者。曾就职于爱奇艺、百度、知乎等互联网公司,目前就职于 ThoughtWorks,从事全栈开发相关工作。正文从这开始~~我把 MVC 框架作为我们...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 761
精华内容 304
关键字:

互联网前端技术架构