24Web前端架构

近来都是接触前端.所以学多点这方面的东西,虽说有实战到项目里面去了,但可能还没走到所谓正确的道路上去.欢迎交流. 转载请说明来着:http://blog.csdn.net/wowkk --------------------------------------------------------------------------------------------- 假设Web前端做多了一点.那就会意识到,不管项目大小,都得考虑到一个"架构"的问题. 由于仅仅要是项目.就会涉及到&q…

基于AngularJS的企业软件前端架构[转载]

这篇是我参加QCon北京2014的演讲内容: 提纲: 企业应用在软件行业中占有很大的比重,而这类软件多数现在也都采用B/S的模式开发,在这个日新月异的时代,它们的前端开发技术找到了什么改进点呢? B/S企业软件前端开发模式大体上与桌面软件类似,都是偏重量级的,在前端可能会有较多的业务逻辑,这些业务逻辑如何被合理模块化,与界面分离,以便测试,成为这个领域的一个重要挑战.另一方面,由于企业应用的界面相对规整,偏重的是数据存取,没有太多花哨的东西,所以常见的界面控件也是可枚举的,如何让开发界面的工作能…

【PC网站前端架构探讨系列】关于中小型PC网站前端架构方案的讨论与实践

目录 1.遇到的问题 2.目标 3.探讨 4.架构设想 5.流程 6.初步实现 7.存在问题 8.最后遇到的问题我在这个系列上篇文章已经讲解并开始逐步应用模块化思想,不知大家还记不记得,题目:[PC网站前端架构探讨系列]结合公司网站首页,谈前端模块化开发与网站性能优化实践 .但是,仍然会存在下列问题: 问题1----模块内部脚本和页面联系密切问题2----所有脚本文件集中放于一个目录,脚本目录不清晰,没有层次当然还有其他很多问题,但就以上两大问题来说,会对后期代码维护带来不便!…

【PC网站前端架构探讨系列】结合公司网站首页，谈前端模块化开发与网站性能优化实践

说在前面上午给大家分享的个人认为比较全,比较官方,比较清晰的grunt使用教程,被挪出首页了,不过没关系,毕竟不是原创,大家想看,我现在贴出地址: http://www.cnblogs.com/sybboy/p/4877055.html 下面可是我自己的东西,算是这段时间搞前端架构的总结吧: 目录 1.遇到的问题 2.目标 3.如何解决 4.结果分析 5.尚未解决遇到的问题问题1----脚本混乱,没有层次和固定代码位置问题2----脚本和css请求较多,请求未压缩,文件未压缩合并问题3…

我的前端架构之二--统一扩展Js方法

我的前端架构汇总 MyJs_Core.js 这是一个核心的Js文件,它扩展了原生的Js方法.如下: Array对象: 1) indexOf 2) max 3) min 4) removeAt 5) insertAt 6) remove 7) intersect 8) minus 9) Recursion 10) last 11) distinct 12) to 13) addArray String对象: 1) indexFrom:不区分大小写进行查找. 2) format: 使用索引进行参数化…

用“MEAN”技术栈开发web应用（一）AngularJs前端架构

前言不知何时突然冒出“MEAN技术栈”这个新词,听起来很牛逼的样子,其实就是我们已经熟悉了的近两年在前端比较流行的技术,mongodb.express.angularjs.nodejs,由于这几项技术涵盖了从前端到后端再到数据库,可以用他们完整的开发一个web应用了,所以成了一个非常牛逼的组合,颇有当年LAMP的气势.前端要从切图仔迈向全栈的路上,这几门技术必须得有所涉猎.本系列文章利用自己虚构的一个小项目为例,对“使用MEAN技术栈开发web应用”做一个入门级的介绍. AngularJs…

Turtle Online：致力于打造超接地气的PC前端架构，组件+API，快速搭建前端开发

架构创作初衷每当新开一个项目时,都会绞尽脑汁去考虑采用哪种框架:requirejs/seajs.jquery/zepto.backbone.easeUI/Bootstrap/AngularJS……,特别是团队合作的时候,不同的人熟悉不同的框架,最终都会经过一番头疼才能定下来,进入开发之后还会不断的质疑当初的选择.鉴于此,我想开发一个属于自己的框架,一方面把前端知识贯穿一下,另一方面用起来也顺手,免得又犯选择恐惧症.开发之初,我给框架的定位是: 1. 好用组件直接采用$(容器).组件名{…},…

[置顶] HTML语义和前端架构

关于语义学语义学是研究符号和意义之间的关系以及它们表示的内容.在语言学中,则主要是研究符号(例如单词,短语或者语音)在语言中所表达的意义.而在前端开发时,语义学则更多的关注HTML元素,属性以及它的值所表达的含义.而这些规范的语义可以帮助开发人员更好的理解网站上的信息.但是即使是以非常正式的形式来规范这些语义,程序员仍然会去修改这些语义. 各种HTML语义之间的区别书写语义化的HTML是现代专业的前端开发基本原则之一.绝大部分的语义是和已经存在的内容或期盼的内容的本性息息相关的(例如:h1元…

web富客户端应用下，前端架构、系列（二）。

序我们在上面的文章中已经建立起来一个比较简单的前端架构虽然这个看上去很简陋. 不过毕竟也是思想的结晶. 从这一篇文章开始,我将陆续完善这一个前端架构.. 重新构思上一篇我们把前端架构分为3个模块: 他们分别是数据层,模板层,交互层... 这样情况下 ,确实会比那种混杂在一起的纯js页面要更有结构化更利于维护.. 这个也是借鉴了 MVC 模式的逻辑进行构建的.. 但是,在实践开发过程中.我发现,仅仅是这样的分层在交互层这一块显然还是有点杂..在这一层既要处理数据逻辑又要处…

web富客户端应用下，前端架构问题。

前言: 以前的工作大部分都是,前端做页面稍微写几个js效果就算是有复杂的效果也没有涉及到需要去调用后端数据的层面.总体来说,以前的页面逻辑会相对简单后端会做更多的事. 而现在,这些任务都抛给前端来做了.. 前端的业务逻辑变得很复杂有的时候甚至比后端的更复杂.(当然这个也跟写接口的人水平有关...) 在这样的背景下面,如果还是以前那套页面里面写js 或者哪里有效果写哪里的话.无论是实现,还是后面的维护都是一个很大的问题.. 所以,我觉得富客户端web应用,很有必要组建一个自己的前端…

前后端分离之Web前端架构设计

架构设计:前后端分离之Web前端架构设计在前面的文章里我谈到了前后端分离的一些看法,这个看法是从宏观的角度来思考的,没有具体的落地实现,今天我将延续上篇文章的主题,从纯前端的架构设计角度谈谈前后端分离的一种具体实现方案,该方案和我原来设想有了很大的变化,但是核心思想没变,就是控制层是属于Web前端的. 在以前文章里我说道前后端分离的核心在于把mvc的控制层归为前端的一部分,原方案的构想在实际的生产开发里很难做到,我觉得核心还是控制层和视图层的技术异构性,这样后果使得系统改造牵涉面太大,导致在项…

前端leader找我谈心：我是如何从刚毕业的前端菜鸟一步步成长为前端架构师的？

谈谈学习我做前端已经有五年的时间了,从大学刚毕业的时候,我是一个完全什么都不懂的小白.虽然我大学里学的是软件工程专业,但是因为在大学里荒废学业,每天只知道打游戏,基本上到大学毕业之前我是什么都不会的,而且大学里是没有教前端相关的东西的. 我是在大学毕业之前,两三个月,自学了一点点前端的皮毛,也就是会写一点点的html和css.那个时候找工作也不容易,终于有一个公司收留了我,虽然说工资什么的我们暂时按下不提.但是至少他们要我,我就非常地开心了. 从那个时候开始,因为有了项目要做,所以我逼迫自己,…

前端架构师摘自《前端架构设计》-micah godbolt

作为前端架构师,你经常需要制定,或至少能够掌握以上所列的每一项内容.流程中的任何一个环节出现问题,都会迅速演变为开发人员的痛苦,或者导致网站无法持续满足用户要求,甚至崩溃. 前端架构师的用户是开发人员.我们选择的工具.编写的代码.创建的流程,都是为了让开发人员能够建出最高效的.不出错的.可扩展的和可持续优化的系统. 摘自<前端架构设计>-micah godbolt…

React-Navigation web前端架构

React-Navigation 前端架构准备 /*安装组件*/ npm install --save react-navigation npm install --save react-native-gesture-handler /*添加依赖*/ react-native link react-native-gesture-handler tips 如果是通过react-cli 脚手架打包的工程可能出现安装时缺少依赖,我的根据官网上教程指导,就出现这个问题. 问题: bogon:Aweso…

前端开发工程师 - 05.产品前端架构 - 协作流程 & 接口设计 & 版本管理 & 技术选型 &开发实践

05.产品前端架构第1章--协作流程 WEB系统角色定义协作流程职责说明第2章--接口设计概述接口规范规范应用本地开发第3章--版本管理见 Java开发工程师(Web方向) - 01.Java Web开发入门 - 第5章.Git 课堂交流区: 分布式版本控制(DVCS) 对比集中式版本控制系统(CVCS) 由于Git的持续火热, 对于DVCS与CVCS的争论和对比越来越多了, 似乎很多文章都倾向于这个观点:"Git这种DVCS 要比SVN这些CVCS要优越" 实…

基于React的PC网站前端架构分析

代码地址如下:http://www.demodashi.com/demo/12252.html 本文适合对象有过一定开发经验的初级前端工程师: 有过完整项目的开发经验,不论大小: 对node有所了解,关注前端发展,了解所谓"大前端"的概念: 了解React: 了解ES6: 想要初步了解一下大型网站的前端结构的人. 关于demo 本demo是我平时开发React项目时候自己配置的一套开发环境,由于每次写react的demo的时候都需要配置webpack,十分繁琐,因此前段时间我按照自己…

前端架构师亲述：前端工程师成长之路的 N 问及回答

问题回答者:黄轶,目前就职于 Zoom 公司担任前端架构师,曾就职于滴滴和百度. 1. 前端开发问题大佬,能分享下学习路径么,感觉天天忙着开发业务,但是能力好像没有太大提升,不知道该怎么充实自己 ? 解答业务开发有没有痛点,能不能通过技术的手段解决 ? 平时开发业务用到了哪些技术栈和周边的生态链,我是否对他们熟练掌握了,对他们的实现原理呢 ? 平时开发遇到了 bug,调试了很久,能不能提升自己快速定位 bug,解决问题的能力 ? 如果上面分配了一个需求,没有现成的轮子可以用,我是否可以快速…

使用 Angular 打造微前端架构的 ToB 企业级应用

这篇文章其实已经准备了11个月了,因为虽然我们年初就开始使用 Angular 的微前端架构,但是产品一直没有正式发布,无法通过生产环境实践验证可行性,11月16日我们的产品正式灰度发布,所以是时候分享一下我们在使用 Angular 微前端这条路上的心得(踩过的坑)了额,希望和 Angular 社区一起成长一起进步,如果你对微前端有一定的了解并且已经在项目中尝试了可以忽略前面的章节. 什么是微前端微前端这个词这两年很频繁的出现在大家的视野中,最早提出这个概念的应该是在 ThoughtWork 的…

我的前端架构(jquery)汇总

目录我的前端架构之一--页面作用域我的前端架构之二--统一扩展Js方法我的前端架构之三 -- 页面规范我的前端架构之四 -- UI控件我的前端架构之五 -- 一些方案实现判断对象是否是 event var isEvent = ev.toString() == "[object MouseEvent]" var isEvent = data instanceof UIEvent…

Netflix：我们为什么要将GraphQL引入前端架构？

作者|Artem Shtatnov译者|无明在这篇文章中,我们将分享 Netflix 在这些应用程序的前端架构中引入 GraphQL 所积累的经验. 在内部,我们把用于管理广告创建和组装的主要应用程序叫作 Monet.它用于增强广告的创建以及自动管理外部广告平台上的营销广告活动.Monet 有助于推动流量增量转换,增强用户与产品的互动,并向全世界的用户展示我们的内容和 Netflix 品牌. 首先,它有助于扩展和自动化广告创建以及管理数百万个广告素材组合.其次,我们利用各种信号和汇总数据(例如…

大型 web 前端架构设计-面向抽象编程入门

https://mp.weixin.qq.com/s/GG6AtBz6KgNwplpaNXfggQ 大型 web 前端架构设计-面向抽象编程入门曾探腾讯技术工程 2021-01-04 依赖反转原则依赖反转原则的核心思想是:内层模块不应该依赖外层模块,它们都应该依赖于抽象. 尽管我们会花很多时间去考虑哪些模块分别放到内层和外层,尽量保证它们处于单向依赖关系.但在实际开发中,总还是有不少内层模块需要依赖外层模块的场景. 比如在 Localstorge 和 Indexdb 的例子里,User…

前端架构模式 All In One

前端架构模式 All In One 架构模式同构异构微前端 Web Components 组件化无框架去框架前后端分离前端架构图 Clean Architecture https://blog.cleancoder.com/uncle-bob/2011/11/22/Clean-Architecture.html SOLID 原则 https://en.wikipedia.org/wiki/Robert_C._Martin refs https://phodal.github.io/…

基于Vue2.x的前端架构，我们是这么做的

通过Vue CLI可以方便的创建一个Vue项目,但是对于实际项目来说还是不够的,所以一般都会根据业务的情况来在其基础上添加一些共性能力,减少创建新项目时的一些重复操作,本着学习和分享的目的,本文会介绍一下我们Vue项目的前端架构设计,当然,有些地方可能不是最好的方式,毕竟大家的业务不尽相同,适合你的就是最好的. 除了介绍基本的架构设计,本文还会介绍如何开发一个Vue CLI插件和preset预设. ps.本文基于Vue2.x版本,node版本16.5.0 创建一个基本项目先使用Vue CLI创…

前端架构-分层而治，铁打的MV流水的C

大家好,我是Eluxjs的作者,Eluxjs是一套基于"微模块"和"模型驱动"的跨平台.跨框架『同构方案』,欢迎了解... 文前声明,以下推断和结论纯属个人探索,鉴于本人知识水平所限,谬误在所难免,恳请各位大佬不吝赐教... 为什么在web前端很少有人会提到分层架构,例如经典MVC架构,这是因为浏览器诞生之初就只是作为一个后端数据的GUI渲染器.也就是说整体来看,web1.0时代的整个web前端工程就是一个View层,而Model和Controller就是指后端,所…

架构设计：前后端分离之Web前端架构设计

在前面的文章里我谈到了前后端分离的一些看法,这个看法是从宏观的角度来思考的,没有具体的落地实现,今天我将延续上篇文章的主题,从纯前端的架构设计角度谈谈前后端分离的一种具体实现方案,该方案和我原来设想有了很大的变化,但是核心思想没变,就是控制层是属于Web前端的. 在以前文章里我说道前后端分离的核心在于把mvc的控制层归为前端的一部分,原方案的构想在实际的生产开发里很难做到,我觉得核心还是控制层和视图层的技术异构性,这样后果使得系统改造牵涉面太大,导致在项目团队里,沟通.协调以及管理成本相对较高,…

基于angularJS和requireJS的前端架构

1.概要描述 1.1.angularJS描述:angularJS是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来构建一个CRUD应用,它提供了非常方便的且统一高效的解决方案,其数据绑定.基本模版标识符.表单验证.路由.深度链接.组件重用.依赖注入.以及HTML标记等,最受欢迎的莫过于它的双向数据绑定. 1.2.requireJS描述:requireJS是来解决传统的页面加载script标记操作,通过其初始化配…