精华内容
下载资源
问答
  • 首先,前端架构师肯定是掌握好基本的前端技术基础的,正所谓一转多长,首先你得先精通一门,其次,掌握前端技术的同时,还要了解前端技术之外的技能。跳出前端这个思维,才能看到的更多。总结起来有以下几点: 跨界...

    首先,前端架构师肯定是掌握好基本的前端技术基础的,正所谓一转多长,首先你得先精通一门,其次,掌握前端技术的同时,还要了解前端技术之外的技能。跳出前端这个思维,才能看到的更多。总结起来有以下几点:

    跨界

    如果你只会写前端页面,那么无论你的功力练到多么炉火纯青的地步,那么也只能称为你是一个HTML高手?。

    真正的架构师是需要有跨界的能力的,随着技术的持续完善,这种通过岗位变迁实现技术架构升级的情况会越来越少。而架构层面新的变化将来自于岗位自发的对自身工作内容、职责的重新定义,也就是这里说的边界。所以说并不是你作为一个前端开发岗位,你就不能干前端之外的事了,要尝试跳出边界来思考和解决问题。

    页面的秒开是衡量一个前端优化的重要指标,我们以这个优化点来总结一下从哪些方面跨:

    1. 提升速度,从服务端渲染着手,可以利用Node.js往后端跨。
    2. 提升移动web的H5页面的启动耗时,从webview着手,利用iOS和Android技能往客户端跨。

    用户交互操作体验,也是衡量前端优化的重要指标,我们以这个优化点来总结一下从哪些方面跨:

    1. 提升用户交互体验,尝试将web页面客户端化,基于React Native或者Weex,也可以往客户端跨。
    2. 提升页面动画效果,编写高性能的前端动画,也可以往UI动效设计跨。

    合理的跨界,可以让架构师对于业务的整体有深层次的认识,针对各种问题可以提出非前端之外的解决方案。

    尝鲜

    技术是不断发展的,作为一个架构师,不断学习新的技术是非常重要的,这里所说的尝鲜,就是要对技术保持一定的热情,不能只满足于现状,说白了讲就是要不断的学。

    1. 习惯了jQuery开发页面,不妨试试Vue,React。
    2. 写了很久的ES5代码,学学ES6也不错。
    3. 沉醉在HTML,CSS,JavaScript开发页面,不妨学学Flutter。
    4. 打造高性能的Web App,试试Service Worker。
    5. 从HTTP协议触发,改造升级spdy和HTTP2,尝试一下HTTP3。

    上面列举的尝鲜技能,是完全可以从一个前端的角度触发,来不断深入的,保持对每一个新技术的求知欲,是一名架构师必不可少的。

    工具和平台化建设

    只会写代码的程序员只能叫码农。

    当技术达到一定的高度时,能够为业务再次提升的能力就会逐渐变少,那么我们不如跳出技术本身,来改善业务周边的工具平台,同样来为业务服务。作为一名架构师,要有这种能力。

    提到工具平台,大家很快就能跟自己的团队里面的一些工具联系起来。这里主要跟大家探讨一下,我们的工具体系要用什么的思路去规划和review,也看一下我们还有那些可以进一步去完善的点。

     

    为了通俗一点,同样举几个工具平台的例子:

    1. 针对开发调试,需要有一些提升开发效率的工具,例如移动web常用的Fiddler,或者是小程序模拟器。
    2. 针对性能检测,需要有一些能够进行压力测试,发布后线上回归测试的工具,例如腾讯wetest等。
    3. 针对统计分析,每个业务都需要能够提供给产品人员观察数据的工具,当然由于数据敏感性,这里一般每个团队有内部的工具,对外的类似工具例如Google分析等。

    可以看出来工具平台主要就是围绕我们的研发流程中的每一步关键节点去建设起来的,结合起来说,我们可以称之为工程化。工程化是这几年非常热门的概念,对前端来讲也是一个很明确的前端发展方向,其实工具平台的完善过程就是架构工程化的推进过程。

    身为一名架构师,你需要有敏锐的嗅觉来洞悉这些节点。并且在适当的时机能够做出对业务有提升的工具平台,要做到遇到重复性的问题时,想想是不是开发出一款自动化工具平台来处理,这才是代码之外对业务提升解决方案。

    流程和规范化

    身为一名架构师,对流程的制定和规范,是非常重要的。不要小瞧规范的威力,可以极大的提升开发效率,真正优秀的规范不会让使用者感到约束,而是能帮助他们快速定位问题,提升效率。

    这里的规范,总结起来可以分为成:

    1. 结构的规范:对项目的代码结构,不管前后端,合理的分层和组件化是非常必要的。
    2. 编码的规范:这里主要就是代码codereview了,定期的进行codeview的同时,最好可以使用一些自动化工具。
    3. 流程的规范:项目的评审,研发,测试,发布这些阶段都需要有流程来约束,这些需要结合自身团队的实际情况来制定。
    4. 规范的落地:对于规范来说最关键的是执行落地,在制定完规范的同事,要不时的回顾是否切实的落地,这个应该是团队里每个成员坚持的基本准则。

    方法论

    所谓方法论,可能单单说起来是比较抽象的,这里的方法论,主要是指在完成一项小的需求,或者是承接一个重大的项目,在具体的实施过程中,要有一定的方法和技巧,相信大家都看过《穹顶之下》这个视频,就是很强的方法论体现。其实说白了将就是做事要有套路。

    在性能优化时,我们如何证明优化是有效果的,可以采用“三明治法则”(自己起的名字?):

    1. 首先优化前,我们需要找到问题的现状,并且要有数据能够佐证优化前的状态。所以就要学会去收集数据。
    2. 有了数据之后,我们在进行对数据分析的同时,就需要找到问题出现的原因,并且付诸实施解决。这个阶段,就需要记录具体的优化原理。
    3. 优化之后,就要想方设法去验证,并且在验证过程中,同样需要收集数据。

    到此,我们就有了 优化前数据,优化的原理,优化后的数据。通过数据对比,我们就可以很轻易的去佐证我们这次优化是有成效的,并且可以做出一份很漂亮的总结,作为一名架构师而言,这是一个很好的树立威信的场景体现。

    我们可以在发散开来,上面的三步骤可以再次迭代,也就是说,第一次优化,我们达到了效果,但是深究之后,还可以再次进行优化,每次优化都有数据佐证,这就是性能优化的方法论。

    安全意识

    这里为什么要把安全单独拿出来说呢,因为对于一个业务而言,安全是第一要素,就好比一个国家,安全稳定才是发展一切的前提,一旦业务出现安全问题,就可能瞬间损失掉全部,代价是非常惨重的。所以作为一名架构师,必须要保证业务的稳定性,可以总结以下几点:

    1. 对低级的的代码安全问题,要坚决说不,例如前端里面的xss,csrf这些问题。
    2. 对大型运营类活动需求,要有容灾意识和备份,例如在准备了一套方案的同时,要有可选的备用方案。
    3. 尝试使用工具化来解决和预防安全问题,例如BAT这种大型企业,在运维和代码层面,都有一层保障机制,如腾讯的门神系统等。

    团队合作

    没有完美的个人,却有完美的团队。

    即使是一名架构师,我相信他也不是一直在一个人战斗,一个优秀的产品业务,总是诞生于团队,所以时刻保持和团队人员的沟通是必不可少的,这些沟通不限于日常的文字,或者会议,甚至私下的团建活动,都是可以相互了解的。

    所以团队合作的目的就是让团队中的每个人都能明确自己的职责,并发挥出最大的价值,架构师有义务来维护这种合作关系。并且对你的认同,也是团队成员赋予你的,维护良好的氛围,才能让团队成员信服。

    最后,总结一下,对前端架构师理解的一些误区:

    1. 架构师并不等于全栈工程师。
    2. 架构师切记完全脱离代码,但是也不要一直闷着头写代码。
    3. 架构师应当跳出技术本身,从全局的角度来看的业务,发现并解决问题。
    4. 任何项目的架构都不是一开始制定好就是一成不变的,他应该是不断迭代和演进的,架构师有义务来保证架构的创新性。

     

    愿各位在成为架构师的道路上一帆风顺!

    查看更多

    展开全文
  • GitLab CI/CD 是一个内置在GitLab中的工具,用于通过持续方法进行软件开发: Continuous Integration (CI) 持续集成 Continuous Delivery (CD) 持续交付 Continuous Deployment (CD) 持续部署 ...

    GitLab CI/CD 是一个内置在GitLab中的工具,用于通过持续方法进行软件开发:

    Continuous Integration (CI)  持续集成

    Continuous Delivery (CD)     持续交付

    Continuous Deployment (CD)   持续部署

    持续集成的工作原理是将小的代码块推送到Git仓库中托管的应用程序代码库中,并且每次推送时,都要运行一系列脚本来构建、测试和验证代码更改,然后再将其合并到主分支中。

    持续交付和部署相当于更进一步的CI,可以在每次推送到仓库默认分支的同时将应用程序部署到生产环境。

    这些方法使得可以在开发周期的早期发现bugs和errors,从而确保部署到生产环境的所有代码都符合为应用程序建立的代码标准。

    GitLab CI/CD 由一个名为 .gitlab-ci.yml 的文件进行配置,改文件位于仓库的根目录下。文件中指定的脚本由GitLab Runner执行。

    1. GitLab CI/CD 介绍
    软件开发的持续方法基于自动执行脚本,以最大程度地减少在开发应用程序时引入错误的机会。从开发新代码到部署新代码,他们几乎不需要人工干预,甚至根本不需要干预。

    它涉及到在每次小的迭代中就不断地构建、测试和部署代码更改,从而减少了基于已经存在bug或失败的先前版本开发新代码的机会。

    Continuous Integration(持续集成)
    假设一个应用程序,其代码存储在GitLab的Git仓库中。开发人员每天都要多次推送代码更改。对于每次向仓库的推送,你都可以创建一组脚本来自动构建和测试你的应用程序,从而减少了向应用程序引入错误的机会。这种做法称为持续集成,对于提交给应用程序(甚至是开发分支)的每项更改,它都会自动连续进行构建和测试,以确保所引入的更改通过你为应用程序建立的所有测试,准则和代码合规性标准。

    Continuous Delivery(持续交付) 

    展开全文
  • “Web前端架构师”所有的应会必会技术栈 脚手架-创建项目 包管理:lerna 环境变量:dotenv 命令行:commander log定制:npmlog 版本检查:semver Npm api Npm 包安装:npm install 通用 Package类封装 命令行交互:...

    “Web前端架构师”所有的应会必会技术栈

    脚手架-创建项目

    包管理:lerna

    环境变量:dotenv

    命令行:commander

    log定制:npmlog

    版本检查:semver

    Npm api

    Npm 包安装:npm install

    通用 Package类封装

    命令行交互:inquirer

    命令行loading: spinner

    ejs模板渲染

    文件匹配器: glob

    egg.js

    脚手架-发布项目

    云构建 CloudBuild封装

    Githug & Gitee API接入

    git操作:simple-git

    git flow 自动化

    npm 自动化

    WebSocket

    Egg-socket.io

    egg-redis

    Base64 加密&解密

    命令行link: terminal Link

    前端-toB

    Typescript

    Vue3

    Vuex4

    Vue Router4

    Ant Design Vue

    Ant Design Vue 二次开发

    截图: html2canvas

    图片裁剪: cropperjs

    快捷键: hotkeys-js

    二维码: qrcodejs2

    拖动排序:vue-draggable-next

    echarts

    组件拖动

    组件移动

    右键菜单

    复制粘贴

    撤销重做

    动态表单

    前端-toC

    Vue3 SSR

    移动端响应式

    微信分享

    事件处理

    埋点统计

    服务端

    Koa2

    缓存

    输入验证Validator

    登录验证JWT

    GraphQL

    JSON Schema

    跨域配置CORS

    文件上传

    加密Crypto

    模板引擎pug

    定时任务

    静态资源处理

    ORM框架Sequelize

    日志分析

    mongoose

    第三方服务

    阿里云 OSS

    阿里云 ARMS

    微信 jssdk

    腾讯云短信服务SMS

    百度云敏感内容审查

    自研统计服务 EAS

    性能优化

    Webpack-bundle-analyzer

    webpack构建优化

    Webpack 分包

    Webpack gzip压缩

    Webpack extra css

    h5图片懒加载

    静态资源发布CDN

    打包构建

    webpack

    webpack插件开发

    rollup

    Githooks:husky

    Lint 检查

    Prettier 格式化

    jest 单元测试

    mocha 单元测试

    线上云服务

    域名备案和解析

    CNAME域名转发

    HTTPS证书

    云服务器ECS

    云MySQL

    云MongoDB

    云 Redis

    阿里云 OSS

    阿里云 CDN

    阿里云 WAF

    反向代理 Nginx

    进程守护 pm2

    业务组件库

    rollup 打包

    rolup vue 插件

    rollup typescript插件

    rollup commonjs 插件

    rollup css-only 插件

    sourcemap

    vue-test-utils

    npm 发布和配置

    组件平台

    Egg.js restfull API

    Egg-mysql

    egg-mock

    umi

    Ant Design 4

    React

    hooks

    持续集成 CI/CD

    CentOS

    ssh 信任

    shell 脚本

    github actions 持续集成

    travis

    docker

    docker-compose

    自动化接口测试Super Test

    自动发布测试机

    release-it

    运维&监控

    服务器监控

    ali-node

    心跳检测

    异常处理

    报警

    定时任务 Crontab

    日志拆分pm2-logrotate

    安全预防

    防御CC攻击

    防刷防爬

    研发流程

    架构设计

    技术选型

    技术方案设计

    接口设计

    数据库设计

    制定计划

    监控执行

    多人协作

    Code review

    Bug 修复流程

    产品迭代流程

    团队建设

    绩效考核

    面试技巧

    工作汇报

    晋升答辩

    沟通技巧

    团队分享

    展开全文
  • 最新Web前端架构师

    2021-05-03 20:03:10
    阶段一:课程设计及前端创建脚手架开发 第1周 需求分析和架构设计:做什么,如何做? 开工之前,先来看看我们到底要做一个什么项目,有哪些功能。然后站在上帝视角,从整体的架构层面,该如何设计该项目。 课程安排...

    阶段一:课程设计及前端创建脚手架开发
    第1周 需求分析和架构设计:做什么,如何做?
    开工之前,先来看看我们到底要做一个什么项目,有哪些功能。然后站在上帝视角,从整体的架构层面,该如何设计该项目。
    课程安排:
    1、需求分析,到底要做一个什么产品
    2、项目设计,多个项目之间的关系
    3、数据模型设计,各项目之间的数据流转过程
    4、后台管理需求,管理员要管控什么内容
    5、统计需求,知道被访问了多少次
    第2周 脚手架架构设计和框架搭建
    万丈高楼平地起,讲解大厂级别的脚手架是如何设计的,从头开始绘制架构设计图,并完成脚手架的框架搭建。
    课程安排:
    1、掌握脚手架的实现原理
    2、掌握脚手架管理工具Lerna和常用操作
    3、基于Lerna构建脚手架项目
    4、图解脚手架架构设计
    5、脚手架工程体系设计
    6、深入阅读Lerna源码,剖析require.resolve原理
    第3周 脚手架核心流程开发
    本周将完成脚手架内核@imooc-cli/core子项目设计,并开发脚手架的执行准备阶段和命令注册阶段。
    课程安排:
    1、脚手架核心子项目core包架构设计
    2、掌握脚手架node运行版本限制
    3、掌握脚手架root自动降级
    4、掌握npmlog实现自定义脚手架日志
    5、掌握脚手架用户主目录检查
    6、掌握脚手架入参解析和环境变量配置
    7、运用npm API实现脚手架自动更新
    8、掌握脚手架命令注册原理
    9、运用commander简化脚手架命令注册
    10、node支持ES模块化标准的两种方法
    第4周 脚手架命令注册和执行过程开发
    本周将完成脚手架内核@imooc-cli/core子项目的执行命令阶段,我们将采用分离式架构设计、缓存结构设计大幅提升脚手架的下载速度和执行性能。
    课程安排:
    1、掌握脚手架执行命令原理
    2、掌握高性能脚手架架构思路和具体方法
    3、封装通用的npm包管理类Package
    4、掌握API方式完成npm包下载和自动更新
    5、掌握脚手架缓存结构设计
    6、掌握Node多进程的四种实现方案
    7、深度解析Node多进程child_process库源码
    第5周 脚手架创建项目流程设计和开发
    本周将开发脚手架创建项目的@imooc-cli/init子项目,完成init包的准备阶段和下载模板阶段开发。
    课程安排:
    1、脚手架项目创建能力架构设计
    2、深入理解命令行交互原理和inquirer的应用
    3、掌握服务端框架egg.js的开发方法
    4、掌握云mongodb和egg接入mongodb方法
    5、运用egg.js mongodb构建项目模板API
    6、掌握正则表达式并完成项目名称自动格式化
    7、掌握spinner实现命令行loading效果
    8、完成标准项目模板开发
    9、完成项目模板的缓存和下载功能
    第6周 脚手架项目和组件初始化开发
    init包将完成项目和组件的初始化过程,本周将完成init包的安装模板阶段。
    课程安排:
    1、掌握脚手架标准安装模式和自定义安装模式实现原理
    2、掌握ejs模板的实现原理和开发方法
    3、基于ejs模板完成项目模板动态化
    4、完成标准组件模板开发
    5、完成项目或组件项目标准安装流程开发
    6、完成自定义项...

     

    下载地址:https://www.feimaoke.com/8828.html

    展开全文
  • 原标题:【PPT】快手前端架构师分享:前端发展史2019年8月28-29日在台北国际会议中心举办ModernWeb2019上,由快手前端架构师@俞天翔分享《从网页到应用 - 所经历的前端发展史》。本PPT由@俞天翔授权分享。@俞天翔,...
  • 熟悉前端基础知识如 HTML、JS、CSS 。 能够使用一门 MVVM 框架进行简单的业务开发。 遇到复杂的组件和模块,会找现有的轮子使用。 会使用百度、google 等检索工具搜索问题。 中级程序员(阿里 p5...
  • **先来看一份DUBBO脑图:**HelloWorld+前置知识+适合群体+架构(核心点:生产者 消费者问题 特点:连通性,健壮性,伸缩性,升级型、节点调用关系图) 什么是Dubbo(分布式服务框架+RPC远程调用解决服务+SOA服务治理...
  • 架构师作用 系统设计 技术布局 疑难问题攻克 前端规范制定 前端工程化实践 指导中高级工程师 系统架构设计需要考虑哪些? 手动构建或基于Cli构建基础项目 提前设计好项目整体架构能力 目录结构 工具函数...
  • 综述:找到自己和架构师之间的距离架构师是很多程序员梦寐以求的title,但是在我的成长过程中,看到了太多因为架构问题失败的项目。很多架构师其实还停留在应用技能会用的阶段,基础很差。一方面,可以从问基础知识...
  • 综述:找到自己和架构师之间的距离架构师是很多程序员梦寐以求的title,但是在我的成长过程中,看到了太多因为架构问题失败的项目。很多架构师其实还停留在应用技能会用的阶段,基础很差。一方面,可以从问基础知识...
  • 了解了不规范的代码以及不规范代码带来的问题,作为前端架构师,我们就要思考三个问题: 如何制定规范? 如何统一团队的规范? 如何检测规范? 制定和统一规范 像上面给变量随意乱起名字的情况,在早期的前端项目中...
  • 各平台IT视频教程分享,前端工程师,前端架构师,后台工程师,后台端架构师,app工程师,移动架构师等视频资源联系我 重复说三遍: 各平台 各平台 各平台
  • 本文从网络协议,技术背景,安全和生产...HTTP 协议是前端最熟悉的网络通信协议。我们通常的打开网页,请求接口,都属于 HTTP 请求。 HTTP 请求的特点是:请求-> 响应。客户端发起请求,服务端收到请求后进行响应
  • 最后 一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平...
  • 有人说产品开发过程中web前端没有结论,只有随需求不停的修改,但是项目必须要有阶段性的结论,作为一个前端开发,如何避免为了某一个需求而陷入反复更改的困境呢?不要把责任全部推到产品不断的需求更改或者设计...
  • 因此阿里大佬推荐的24张不同领域的技能图谱,涵盖前端、后端、移动、运维、微服务、大数据、机器学习等热门领域,方便用户把相关的知识和技能串起来。我今天分享出来,希望可以帮助正在学习的你! 这些技能图都是...
  • 1.H5的新特性有哪些 2.Label的作用是什么?是怎么用的? ...4.dom如何实现浏览器内多个标签页之间的通信? 5.实现不使用 border 画出1px高的线,在不同浏览器的标准模式与怪异模式下都 能保持一致的效果 ...
  • 数字IC设计师 / 前端设计工程师 / 芯片架构师 架构师和领域相关性较强,依赖于历史经验。网络芯片的架构师,你让他去做AI加速,可能也没办法一下子拿出成果来。 芯片工程师年薪百万是极限,项目负责人和架构师可以...
  • 简介:成为一名架构师可能是很多开发者的技术追求之一。那么如何理解架构?架构师是一个什么样的角色,需要具备什么样的能力?在架构师的道路上,会面临哪些挑战?本文作者道延分享他对架构以及架构师的思考和相关...
  • 梳理下作为前端架构师应该掌握的知识技能,方便自己能一步一步的成长为架构师。 技能掌握程度自查列表 CSS 推荐两本书,1.《CSS世界》、2.《CSS揭秘》 先后看完这两本书,对提升css技术有很大帮助 命名建议与约束...
  • 这种业务架构师要理解具体的业务,要了解业务中具体的功能要求以及功能模块之间的关系。并且选择合适的公共组件和技术架构,用于产品发展的不同阶段。 系统架构的概念很多,从不同角度有不同的理解,我们认为架构的...
  • javascript篇 一、数据类型 JavaScript 有几种类型 基本数据类型:undefined、null、boolean、number、string、symbol(es6的新数据类型) 引用数据类型:object、array、function(统称为object) ...
  • 励志当一名架构师

    千次阅读 热门讨论 2021-05-14 17:32:27
    前言 本篇文章主要总结项目中常见的架构,从前后端的各种耦合到前后端的分离为主线,其他技术作为副线详细总结 未分离时代(各种耦合) 早期主要使用的是 MVC 架构
  • 07高性能网站建设指南 《高性能网站建设指南:前端工程师技能精髓》适合Web架构师、信息架构师、Web开发人员及产品经理阅读和参考。 优点: 1) 提交Web设计与开发时如何提高性能,如何减少Web流量、如何减少HTTP...
  • 前端的现状 提到现状,必须先提到一个概念 大前端。由于近几年互联网的发展,尤其是移动互联网的发展,有的大前端概念将 Native 归入前端的范畴,有的大前端概念将 Node 甚至只渲染页面的 PHP 归入前端范畴,但不管...
  • 架构师的主要职责

    2021-03-11 16:43:11
    进阶成为架构师是大多数java程序员们的梦想,架构师从广义上可分为软件架构师、系统架构师,软件架构师是程序员最容易突破、最可能进阶的一条职业发展路径,我这次主要分享软件架构师的相关知识点。01—架构师的定义...
  • 点击箭头处“JAVA日知录”,关注并星标哟!!导读:本系列文章教你怎么样成为一名架构师,而本篇文章则带你先认识一下什么是架构师架构师的工作是什么?为什么需要架构师为什么需要架构师或者说架...
  • 关注公众号前端开发博客,回复“加群”加入我们一起学习,天天进步作者:零零水链接:https://juejin.cn/post/68449038538595369031、综合我在2年之前,...
  • 一文读懂微前端架构

    2021-05-19 00:19:18
    转载本文请注明出处:微信公众号EAWorld前端开发在程序猿中无疑是一个比较苦逼的存在,作为一个前端开发,你必须要掌握Javascript,HTML,CSS这三大基础。Javascript...
  • 【Java从0到架构师】学习记录

    热门讨论 2021-07-25 00:36:11
    Java 从 0 到 架构师基本概念 + 环境搭建Servlet_JSPMySQL 基础 + 多表查询JDBC、Spring JDBC、JUnit Gitee 代码:https://gitee.com/szluyu99/mj_java/tree/master 基本概念 + 环境搭建 【Java从0到架构师】基本...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 60,254
精华内容 24,101
关键字:

前端架构师