精华内容
下载资源
问答
  • 前端架构

    千次阅读 2015-01-09 09:40:58
    前端架构师要知道的三件事:要实现什么,能否实现,如何来实现 前端领域中组件、插件和控件分别是什么? 组件指前端的组成部分,引入的任何一个库,都可称为组件。其中,提供视觉元素的组件称之为UI 组件(也称UI...

    前端架构师要知道的三件事:要实现什么,能否实现,如何来实现

    前端领域中组件、插件和控件分别是什么?

    组件指前端的组成部分,引入的任何一个库,都可称为组件。其中,提供视觉元素的组件称之为UI 组件(也称UI库/UI框架,UI区别于前端,存指视觉与交互)。UI组件里的一个个视觉元素称之为控件。如果一个组件是实现了另一个组件(如jquery)的接口,则这个组件又叫插件

     

    前端架构包含以下四部分:

    一、页面:布局、视觉和交互设计(体验)
    二、鲁棒性:安全与性能(脚本性能,DOM性能,加载性能),国际化,浏览器兼容性

    三、前端框架:目录结构,协同开发与代码复用(模块化,插件化),MVC跳转与包含(单页,iframe,路由),加载控制,整合UI组件

    组件分类:

    1、UI组件: bootstrap组件与插件,jquery ui,jquery插件
    2、JS框架:angularjs,emberjs,backbone
    3、工具:jquery(及其插件),underscroe,d3,raphael,requirejs
    4、CSS框架:bootstrap,less/sass

    四、开发流程:

    设计工具:Axure、xmind
    编码规范:排版、注释、命名规范,安全规范,性能规范
    开发工具:WebStorm(启用JSHint),NotePad++,Sublime Text
    调试工具:chrome,Fiddle,IETester
    版本控制:SVN,GIT

    对比工具:beyond compare、compare it!
    制图工具:AI(矢量图SVG)、PS(位图IMG)、IcoMoon(字体图Font)
    打桩工具(解耦,演示):mock.js
    自动化工具:grunt(检查,编译,压缩,合并,打包),bower(依赖库管理)

    网页审查工具: Lighthouse

     

    补充

    国际化(i18n目录下,多个词条json文件,当前语种放在cookie中,用cookie中的信息下载一个词条文件)
    http://todomvc.com/
    知识地图:http://html5ify.com/fks/fks_chart/

    Fiddler 与 https:tools -> fiddler options -> https -> capture https connects
    Fiddler 与 proxy:开启fiddler会改变代理设置,需要代理访问的网站需要重新设置代理
    Fiddler 会开一个代理服务127.0.0.1:8888,然后把浏览器的代理改成了这个
    Fiddler 与 https:tools -> fiddler options -> https -> capture https connects
    Fiddler 与 proxy:tools -> fiddler option -> gateway -> Manual Proxy Configration -> http=proxy.aa.com:8080;https=proxy.aa.com:8080;

    展开全文
  • 前端架构 应用自治 单一职责 技术栈无关 为什么需要微前端 遗留系统迁移 后端解耦,前端聚合 热闹驱动开发 二、微前端的技术拆分方式 路由分发式:...

    一、微前端

    1. 微前端架构

      1. 应用自治

      2. 单一职责

      3. 技术栈无关

    2. 为什么需要微前端

      1. 遗留系统迁移

      2. 后端解耦,前端聚合

      3. 热闹驱动开发

    二、微前端的技术拆分方式

    1. 路由分发式:通过HTTP服务器的反向代理功能,将请求路由映射到对应的应用上

    2. 前端微服务化:在不同的框架之上设计通信和加载机制,以在一个页面内加载对应的应用

    3. 微应用:通过软件工程的方式,在部署构建环境中,把多个独立的应用组合成一个单体应用

    4. 微件化:开发一个新的构建系统,将部分业务功能构建成一个独立的chunk代码,使用时只需要远程加载即可

    5. 前端容器化:将iframe作为容器来容纳其它前端应用

    6. 应用组件化:借助于Web Components技术,来构建跨框架的前端应用

    三、微前端的业务划分方式

    1. 按照业务拆分

    2. 按照权限拆分

    3. 按照变更的频率拆分

    4. 按照组织结构拆分

    5. 跟随后端微服务拆分

    6. 按照领域拆分

    四、微前端的架构设计

    1. 组件与模式库

      1. 样式

        1. 组件级样式

        2. 应用级样式

        3. 系统级样式

      2. 业务组件及共享库

    2. 应用通信机制

      1. 同级通信

        1. 通过全局的自定义事件

        2. 通过共享Window

      2. 父子级通信

        1. 通过PostMessage在父子窗口之间进行通信

        2. 通过parent.window寻找到父窗口,再发出全局的自定义事件

        3. 当其他应用加载时,将消息发送给父窗口,由父窗口发出自定义事件

        4. 当其他应用未加载时,先将消息传递给父窗口,再由父窗口进行存储,提供一个获取通信的机制

    3. 数据共享机制

      1. URI参数传递

      2. 使用LocalStorage共享数据

      3. 其他客户端存储,如IndexedDB、Web SQL等

      4. 服务端存储客户端状态,可以采用JSON格式存储

    4. 专用的构建系统

    五、微前端的架构模式

    1. 基座模式:通过一个主应用来管理其他应用,设计难度小,方便实践,但是通用度低

    2. 自组织模式:应用之间是平等的,不存在相互管理的模式,设计难度大,不方便实施,但是通用度高

    六、微前端的设计理念

    1. 中心化:应用注册表

    2. 标志化应用

    3. 生命周期

      1. 加载应用

      2. 运行应用

      3. 卸载应用

    4. 高内聚,低耦合

    七、“微”害架构

    1. 微架构

      1. 后端拆分

      2. App拆分

      3. 前端拆分

    2. 架构的演进

      1. 快速实现想法

      2. 添加越来越多的功能,应用变得臃肿

      3. 添加新功能的难度越来越大,引出微服务架构

    3. 微架构带来的问题

      1. 后端:微服务到应用

        1. 代码架构

        2. 部署流程

      2. 客户端

        1. 插件化

        2. 组件化

    4. 解决方式:可拆分式微架构

     


     

    推荐阅读

    1. 上篇:【前端架构】前后端分离架构设计

    参考资料

    1. 《前端架构:从入门到微前端》

    微信公众号“前端那些事儿”

    展开全文
  • 前端架构设计

    千次阅读 2018-04-12 10:44:20
    作者结合自己在 Red Hat 公司的项目实战经历,探讨了前端架构原则和前端架构的核心内容,包括工作流程、测试流程和文档记录,以及作为前端架构师所要承担的具体开发工作,包括 HTML、JavaScript 和 CSS 等。...

    内容简介

    本书展示了一名成熟的前端架构师对前端开发全面而深刻的理解。作者结合自己在 Red Hat 公司的项目实战经历,探讨了前端架构原则和前端架构的核心内容,包括工作流程、测试流程和文档记录,以及作为前端架构师所要承担的具体开发工作,包括 HTML、JavaScript 和 CSS 等。

    本书适合前端开发人员,以及具有一定技术背景的前端管理者。

    作者简介

    Micah Godbolt,前端架构师,作家,播客播主,世界级开源大会的培训师和演讲师。他在个人博客(https://micahgodbolt.com)中经常大力推广前端架构、Sass、视觉还原测试和基于模式的设计方法。他出生于太平洋西北地区,目前和妻子以及两个孩子定居于波特兰的郊区。

    Micah 曾经受聘于 Red Hat(红帽)公司。但是,本书中所表达的观点仅代表作者本人,并不代表作者就职过的任何公司,包括 Red Hat。

    阅读全文: http://gitbook.cn/gitchat/geekbook/5ac19cf69e924a1dc0299c29

    展开全文
  • 前端架构--从入门到微前端

    千次阅读 2019-11-18 19:08:12
    年中,自己做规划(2019Thinking(上) – 一个前端开发者的个人思考)时,考量了一段时间「微前端」,也关注到了《微前端的那些事儿》的文章,从而了解了作者「黄峰达」,也就购买了下面将要聊的书《前端架构:从入门...

    年中,自己做规划(2019Thinking(上) – 一个前端开发者的个人思考)时,考量了一段时间「微前端」,也关注到了《微前端的那些事儿》的文章,从而了解了作者「黄峰达」,也就购买了下面将要聊的书《前端架构:从入门到微前端》

    本书围绕前端架构的实施,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。

    • 设计:架构设计的模式,以及设计和制定前端工作流
    • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系
    • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构
    • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构
    • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构

    本书虽“厚重”,但是内容上并不复杂。比较适合初、中级的前端开发人员或者想了解前端的小伙伴。在此并不想呈现太多的书中内容摘要,而是想通过作者的一些表达来结合自身和自己团队来谈一下观点和想法,特别是在架构方面。

    为啥需要架构

    长期项目面临的主要挑战是团队的士气、能力的增长以及架构的演进;
    短期项目的主要挑战是技术实践与业务进度的冲突。

    就我而言,架构带来的直观收益是:减少了大量的重复开发工作以及一些复杂问题的场景化处理。我们可以专注到业务上来,而不必去处理那些复杂的数据流、事件交互等。对于前端而言,业务性和交互越来越重,架构的重要性不言而喻。页面整体渲染 => 结构行为表现分离 => 插件化/模块化 => MVC/MVVM => 组件化。整个发展历程,都是在尽可能的保证职责单一性,来达到复用更高、维护更便捷。

    一个老生常谈的话题,前端日新月异,我们如何选择前端框架呢?业务+团队能力+浏览器支持范围+框架星数+社区活跃度+未来切换成本。选择了一个框架,代表接收了一种开发理念和思想,这个至关重要,一定要和自己团队的调调契合。与此同时,选择了一个框架,也不能一味的只用该框架。对于不同的项目,架构和选型,不能一概而论。接收变化、迎接变化、主动变化才能更好的发展。

    “大而全还是小而美”,没有标准答案。不要想着一个框架可以满足所有;也不要手里拿个锤子,看啥都是钉子。没有一种架构能满足未来的所有需求。我们要「因地制宜」,一些场景下,jQuery/Bootstrap 依然具有很大的用武之地。对于开发人员来说,要永远坚信:实践出真知

    架构需要些啥

    架构需要发展、需要迭代! 好的架构:20%的计划式设计,80%的演进式设计(只凭一系列的架构蓝图,没有相应的实施规范和原则,便无法按我们预期的方式来实施)。

    《Linux/Unix 设计思想》中提及了这样一段:

    1. 在背水一战的情况下,设计了第一个系统
    2. 专家们在第一个系统的基础上,做出来伟大而臃肿的第二个系统
    3. 受累于第二个系统的人,设计出了第三个系统

    所以,关于架构的重要决定 – 要延迟决策(在条件充分的时候再做决策),而不是直接拍脑袋。花费大量的时间盲目地修改架构,那样只会造成资源的浪费。

    • 不多也不少:不做多余的设计,也不缺少关键的部分
    • 演进式:不断地演进以使架构适应当前的环境
    • 持续性:长期的架构改进比什么都重要

    架构的产生不是一蹴而就,需要过程:架构设计 => 概念验证 PoC(Proof of Concept)=> 迭代0,搭建系统的基础设施。

    我们做了哪些

    整个公司前端团队20多人,自己团队(平台前端)人数10人左右。两年间、我们经历了大大小小近50个项目。项目的相似度很高,更多的时间大家都在写页面、改bug,每周奔波于多个项目之间。除了劳累,其他收获微乎其微。 因此,对于我们的挑战:

    1. 和业务关系不大、相同部分如何抽离+维护?
    2. 业务相关的内容,相同部分如何抽离+维护?

    业务关系不大

    首当其冲,组件库啊!!!但是组件库的可扩展性、维护成了拦路虎。同时,我们划分不同的前端边界(和业务关系不大)不是一件容易的事。

    罗列一下大致内容(看似简单,过程艰辛漫长):

    • 第一阶段:从项目中抽离了组件库和图表库(两个独立工程、项目中通过 git subtree引用)
    • 第二阶段:对 charts、components 按照组件思路进行改造(merge + extend + template)
    • 第三阶段:建立 Demo 站,为 charts、components 提供开发和展示环境(无特殊诉求无需查看源码)
    • 第四阶段:抽离 charts、components 共同的 utils(独立仓库 git subtree 引用)
    • 第五阶段:通过 yarn workspace 来处理公共依赖(关键点)
    • 第六阶段:解决 charts、components、utils 多仓提交的问题(monorepo)

    有了上述组件库的基础上,衍生了可视化大屏生成器。对于我们而言,组件+模式库仍然是一个长期积累过程:风格指南(Style Guide) => UI库 => 设计系统。总之,实现业务是我们的首要任务。技术的发展源于业务;反之也会更好的推动业务发展。业务着眼的是今天或明天,技术放眼未来;商业模式无壁垒,技术才是王道;技术会推动行业变革。

    业务相关内容

    微前端?目前预演中,对于目前我们思考的点:

    • 业务边界如何划分?
    • 应用的标识化或者注册中心的方式如何考量?
    • 应用通信机制:嵌入业务的特定通信机制 或 剥离业务的通用通信机制?
    • 数据共享机制,两部分:状态 和 应用数据?
    • 应用生命周期如何管理?

    综述,人为了逃避真正的思考,愿意做任何事。 最小MVP行动起来才是王道。没有脚踏实地,又哪里来的志存高远。杜绝纸牌屋心理(它可以工作,可我不知道为什么,所以谁也别碰它)。

    展开全文
  • 【编者按】本文作者Matt Carella为我们讲解了如何构建一个良好的架构。除了选择正确的工具以外,在组织工作流中遵循清晰整洁的原则对于我们来说是非常重要的。...建立一个好的前端架构是开始开发Web应用或网站的
  • 前端架构详谈(1)纯前端发布

    千次阅读 2019-06-17 16:00:12
    前端架构详谈(1)纯前端发布 0、前言 1、项目简述 2、场景描述 3、数据结构简述 4、项目核心点 5、后台服务 6、项目架构图 7、数据库设计 8、后期功能扩展 9、示例效果 10、总结 0、前言 在上一篇文章《大型项目...
  • 前端架构八大设计准则

    万次阅读 2020-07-14 21:04:03
    本人比较喜欢钻研架构,目前在某大型互联网公司任职前端架构师。 谨以此文献给需要接触到前端架构以及想接触这块的小伙伴们,希望能够帮到大家。 适度设计(第一准则) 无论是前端还是后台,这一条是通用的。...
  • 前端架构

    2020-11-15 20:08:18
    前端架构图 https://www.cnblogs.com/clwydjgs/p/10796763.html
  • 前端架构,前端工程化

    万次阅读 多人点赞 2018-01-31 10:49:28
    前端架构: 1.前端工程化 web应用复杂度的增加,特别是单页面应用的风靡。组件化,工程化,自动化成了前端发展的趋势。或者说一线的互联网公司就是这么做的。 每个前端团队都在打造自己的前端开发体系,这通常是一个...
  • 本书是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更...
  • web前端开发入门视频教程 前端架构师课程

    万次阅读 多人点赞 2019-05-05 21:18:03
    web前端架构师,其实就是高级开发的代名词。因为架构是一个整体,没有孤立的前端与后端。如果一定要这么分,就说明你的工作在这个单位的任务倾向和内容就是那么点玩意儿,而这又有多少呢?页面开发以及相关的那么点...
  • 前端架构解决方案

    千次阅读 2018-04-12 17:07:17
    ue2平台通过1年多的努力,为解决前后端友好分离对angular,react,vue并结合nodejs进行服务端渲染,同时做了大量的中间件,为前端架构设计提供非常良好的解决方案。例如:1. api请求代理 2. 静态图片缓存 3. less...
  • 关于前端架构的过去、现在与未来

    千次阅读 2020-02-13 14:16:36
    本文从经典MVC说起,详尽解读了当代前端架构及下一阶段的展望。对于前端工程师,以及想从宏观层面理解现代Web应用程序架构的Web开发人员来说,均能从中获益。 软件架构的核心思想,就是推断软件系统各个组件之间...
  • 前端学习之路及前端架构的演进一些思考 最近这些年前端发展十分迅猛,各种框架,插件,组件库如雨后春笋,让人应接不暇。很多刚进去前端开发的同学可能会眼花缭乱,不知从何入手。这篇文章主要讲下我自身前端学习之...
  • 前端架构

    2014-09-09 13:22:59
    1、负责云计算产品前端架构工作及产品开发规划工作; 2、维护及优化网站前端性能,优化前端开发模式和规范; 3、根据产品人员提供的业务需求,探索并优化前端开发效果; 4、探索并优化前端开发效率、代码质量。
  • 个人的中小型项目前端架构浅谈

    万次阅读 多人点赞 2017-04-23 02:19:27
    前端架构浅谈0、前注鉴于作者本人的能力有限(非常有限),并且依然在学习中,因此本文的高度和深度必然有所欠缺。欢迎(并且非常欢迎)大家来批评指正,如果能详细的说明问题在哪里,如何解决和改正,那么就太感谢...
  • 1:前端架构的基本知识 1: 前端工程师必须会的一些技能 前端工程师基本技能图.PNG 2: 前端架构基本知识 什么是前端架构? 每个人对每个架构有不同的认识和一些想法。没有一个架构是完美的,只有一个架构是不是...
  • 基于Vue的前端架构设计

    千次阅读 2020-02-24 23:49:54
    前端架构设计图 MVVM架构模式 MVVM的简介 MVVM 由 Model,View,ViewModel 三部分构成,Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现...
  • 前端架构演进及主流UI

    千次阅读 多人点赞 2020-04-21 11:49:42
    前端演进到现在,各种技术框架已经层出不穷了,作为一名开发少不了要干一些前端的活儿,那么整个前端架构体系是怎样的呢?让我们一起来了解回顾一下 前端三要素 HTML(结构):超文本标记语言(Hyper Text Markup ...
  • 前端的入门书籍已经很多了,从《JavaScript 高级程序设计》到《精通 CSS:高级 Web 标准解决方案》 前端的框架书籍已经很多了,从《深入浅出 Node.js》(笑~)到《JavaScript 框架设计》 所以,两年前当我想总结我...
  • 前端架构之移动端混合架构(hybrid) 从过去的切图仔到如今的大前端,前端这一新兴发展起来的领域已经在软件行业变得尤为重要,一款重前端产品的成败更在于他的架构。 架构 软件整体结构与内部组件,外部软件高效...
  • 整洁前端架构

    千次阅读 2019-04-22 19:17:04
    前端的恶梦 在我最近的一个项目里,我使用了 Angular 和混合应用技术编写了一个实时聊天应用。为了方便这个应用直接修改,无缝地嵌入到其它应用程序中。我尽量减少了 Component 和 Service 的数量——然而,由于交互...
  • 浅谈项目前端架构

    千次阅读 2018-06-03 01:20:22
    浅谈项目前端架构 0、前注 鉴于本人的能力有限(非常有限),并且依然在学习中,因此本文的高度和深度必然有所欠缺。 欢迎(并且非常欢迎)大家来批评指正,如果能详细的说明问题在哪里,如何解决和改正,那么就...
  • 前端的入门书籍已经很多了,从《JavaScript 高级程序设计》到《精通 CSS:高级 Web 标准解决方案》前端的框架书籍已经很多了,从《深入浅出 Node.js》(...
  • 点击上方“开发者技术前线”,选择“星标”18:50在看真爱来自:爱奇艺技术产品团队前言近来,微前端的概念非常火爆,那么什么是微前端架构?微前端架构是一种架构风格类似于微服务的架构,它...
  • 前端架构师之路

    万次阅读 2018-06-29 15:56:36
    最近没事的时候看了许多前端架构的博客,发现一个哥们整理了前端所涉及的体系感觉挺充分的,就哪里分享一下,没事充充能。毕竟我虽然不是要成为像海贼王一样的男人,可最起码也要走一个架构师之路对吧~~ 漩涡鸣人,...
  • 考虑广大群友的需求,会推出的『前端架构:从入门到微前端』。相关情况如下:售价暂定99 元快递顺丰限中国内地京东官方的上架日期是 6.25,所以日期你懂的所以,有兴趣的可...
  • 我在2年之前,写过一篇中小型项目的前端架构浅谈。 随着能力的上升,以及在阿里巴巴工作的经验,是时候写一篇大型项目的前端架构分析了。 本篇文章不会更多侧重于具体技术实现,而是尝试从更高角度出发,分析为什么...
  • 大型项目前端架构浅谈(8000字原创首发)

    千次阅读 多人点赞 2019-05-26 13:06:52
    大型项目前端架构浅谈 目录: 1、综合 1.1、使用场景 1.2、核心思想 1.3、切入角度 1.4、其他 2、基础层设计 2.1、自建Gitlab 2.2、版本管理 2.3、自动编译发布Jenkins 2.4、纯前端版本发布 2.5、统一脚手架 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 256,411
精华内容 102,564
关键字:

前端架构