我在阿里这仨月 前端开发流程 前端进阶的思考 延伸学习的方式很简单:google 一个关键词你能看到十几篇优秀的博文,再这些博文中寻找新的关键字,直到整个大知识点得到突破
Alibaba 试用期是三个月,转眼三个月过去了,也到了转正述职的时间。回想这三个月做过的事情,很多很杂,但还是有重点。
本文谈一谈工作中遇到的各种场景,需要用到的一些前端知识,以及我对前端进阶学习的一点思考。
一、漫谈
刚入职不久阿里巴巴就上市了,这是件振奋人心的事情。实际上在正式入职之前,我就已经在淘宝UED实习了三个月,所以这边的工作环境和开发流程都比较熟悉了。
在工作中,遇到了很多这样的场景:
1. 线上 bug 处理
运营:“嘿,小胡子,有客户反馈这个提交表单的页面中,上传图片预览总是失败,麻烦你跟进下这个case~”。
小胡子哥:“哦,好的!”
这个时候手头可能有很多工作,但记住一个原则,线上问题的优先级是最高的,“客户第一”是阿里也是所有公司必须秉承的一个价值观理念。
打开浏览器,发现我这边并没有图片上传预览失败的问题,我纳闷了良久,期间让用户尝试换浏览器、电脑,未果,最后不得不远程连接客户的电脑,查看问题。(最后定位原因为某个地区的 CDN 出了问题)
2. 网站改版(前端开发流程)
老大:“小胡子,以后你就负责这两条业务线了哈~”。
小胡子哥:“嗯”。
某天,运营:“网站上线几个新增功能,之前的流程需要优化,本次将对 xx网站改版,几哩吧啦几哩吧啦..... 小胡子啊,几哩吧啦几哩吧啦.....”。
小胡子哥:“这个需求前端实现成本太高,是不是可以这样;这个地方的修改,几哩吧啦几哩吧啦.....好的!”。
一个大的需求过来,一般会经过多次评审。刚开始是产品GG和运营MM们互喷口水,喷完了PRM评审也就完了,那么这个时候一般就确定要做什么啦,然后会把前端、视觉、开发等同学都叫过去参加交互评审,交互评审敲定之后,视觉同学就回去画图啦,这个时候后端同学会去准备数据,前端同学会跟视觉MM联系紧密,形影不离。
视觉稿设计完了之后,前端就正式投入开发了。刚开始会面临一个问题,前后端的接口谁来拟订?
后端数据还在准备中,如果后端拟订接口,则刚开始后端需要模拟数据,此时接口地址和前端开发环境还不在一个域下,取数据存在跨域问题,如果先改成 jsonp 的接口,开发完毕再改成 json 接口,那么后续程序也需要跟着一起改动。如果前端拟订接口,则前端需要在本地 mock 数据,若开发完毕时后端数据依然没有准备好,那么联调又是一个麻烦事儿,可能后端还得模拟一次数据,这样前端后端都实现了依次数据模拟,重复工作,冗余。庆幸的是我们有数据接口拟订的工具,这个工具可以将接口信息以文档形式沉淀,并且提供了可跨域访问的 mock 数据,接口的修改也变得异常方便。
好,既然有工具,那我就辛苦点吧~ 写好数据接口,交给后端同学 review,然后开始切图(做业务嘛,唉…)公司内部使用的前端框架叫做 KISSY,目前已经升级到 5.0,而使用比较多的还是 1.4.x 版本。这是个啥玩意儿呢,很多公司没有自己的框架,于是便使用 JQ 开发,这个 KISSY 也是一样的,他就是公司的 JQuery,不过框架对业务更加有亲和力,KISSY 提供了数量庞大的组件和插件,易用性很强,但学习有一定的门槛。
使用 KISSY 完成业务逻辑的开发。我们会将代码发布到 CDN 上,这点我需要得瑟下,阿里的前端发布系统真是好用到了极致!因为 HTML 部分是后端管的,我们开发好 HTML/CSS/JS 之后,会将 HTML 交给后端同学,同时将静态资源 (CSS/JS/IMG) 发布到线上,图片可以直接上传,CSS和JS在本地打包之后,push 到仓库,系统会自动完成 CDN 部署,一般前端的改动在两分钟之内就能在线上见效,一天发布几十个版本毫无压力,不像某度公司,胆战心惊的排着长队发布一个小小的改动,发布的时候还担心别人抢先上线,自己又得 merge 代码(去年在百度实习情况还是这样,不知道如今改善了多少)。
待后端同学也开发完毕后,我们会把测试MM叫到旁边,让她们帮着测试系统bug,这个时候也可以把运营MM叫过来一起测试,修完 bug 就可以正式上线了。
所以在阿里,前端资源是提早上线的,完了后端代码才会上。上面所说皆为 PC 端的开发流程,Mobile 端还是有很大差异,这里就不细说了。
3. 需求的变更
小胡子哥正在得瑟顺利的完成了一个项目的开发,可是此时,运营MM跑过来说:“某个功能因为xx原因本期不能上线了,需要等到V2版本再发,需要前端协助删除xx模块。”
小胡子寻思着,皱了皱眉头。运营MM含情脉脉的对视着小胡子,小胡子说:“那,好吧,改完之后需求还变么?”
运营MM点了点头,然后又摇了摇头。
小胡子心想:“妈蛋”。
然后继续上述流程。
那些还没有出过校门的童鞋们,看到这里,你是不是对公司项目的开发有了大概的了解呢?以上的三个场景是十分常见的,但是在公司绝不仅仅只干这些事情。
在这三个月里,我参与了一个前端自动化检测工具的开发,完成了前后端的改造。所用到的技术嘛,稍微列一列:
- websocket 实时通讯
- scss/less css预处理语言
- grunt/gulp 打包工具
- MVC 分离思想
- Promise 异步编程框架
- Middleware 中间件的编写
- Express Node的框架
- …
涉及到的技术点,很多很多,这些只是一个项目中用到的部分内容。前端,暗藏无数杀机,如果对基础东西掌握不牢靠,你会发现别人三小时搞定的事情,到你这里就得三天,因为你一直在踩坑!
二、前端进阶的思考
很多优秀的前端同学,在学到一定水平之后,会感觉学到尽头了,每天愁着怎么去学习新知识,学习什么新知识。也有很多同学,学习的重点跟工作后的从事内容偏差颇大。所以我想着能不能在这方面跟大家交流一下,一起探讨。
我在微博上也提出了这样的问题。很多同学学习没有规律,今天来点这个明天来点那个,学完之后感觉自己都懂了,但没有太多的平台/工具来检测自己所学是不是到位,然后突然某一天问道,下一步我该学啥?
每个人成长都有一个过程,在这个过程中,我们会经历多次蜕变。踏过前端门槛之后,下一步要想的事情是进阶,提升自己的技能。
在进阶方面,我问个简单的问题:git,你熟练么?
前端发布资源到 CDN 采用的就是 git,诸如 add commit diff log status tag remote push merge 等等,这些 git 常用命令,你是否都熟悉了?git 的版本管理有哪些思路,比如线上出现了 bug,你会如何处理程序,新建分支开发?在原有基础上开发?如何管理版本?等等。
很多知识是需要花费大量的时间学习的,比如 backbone, JQuery源码分析, MVVM, 设计模式, HTTP协议, 响应式, 异步编程, 模块化, websocket, DOM监控, 本地储存, 浏览器渲染原理等等,平时学习的时候可以把这些关键字枚举下,然后针对每个关键字延伸学习。
延伸学习的方式很简单,google 一个关键词你能看到十几篇优秀的博文,再这些博文中寻找新的关键字,直到整个大知识点得到突破。我一直都是这么学习的。
三、小结
好吧,叽哩咕噜又扯了一堆,阿里巴巴是个不错的公司,如果想过来的话,可以联系我哟~ 学习是件长久并且艰苦的事情,收拾好心情,先睡个好觉,明天搞起吧!
我在阿里这仨月 前端开发流程 前端进阶的思考 延伸学习的方式很简单:google 一个关键词你能看到十几篇优秀的博文,再这些博文中寻找新的关键字,直到整个大知识点得到突破的更多相关文章
- 2022年Web前端开发流程和学习路线(详尽版)
前言 前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理.理论上,面向用户的产品里,所有问题(包括产品.设计.后端.甚至看不见的问题)的表现形式,都会暴露在前端,而只有部分问题(数据问题 ...
- 编写函数求整形数组a中存储的m个不重复的整数的第k大的整数(其中m>=1,1<=k<=m)很简单的一个思路是酱紫的:管他辣么多干啥,上来一把排序然后直接得答案
/** * @author:(LiberHome) * @date:Created in 2019/2/28 20:38 * @description: * @version:$ *//*编写函数求整 ...
- ASP.NET中MD5的加密方式很简单
在ASP.NET中MD5的加密方式很简单,代码如下: FormsAuthentication.HashPasswordForStoringInConfigFile(str, "MD5&quo ...
- 实例讲解基于 React+Redux 的前端开发流程
原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 s ...
- Backbone前端开发流程及规范
定好View 首先,根据页面切分View,切分View的规则是将重复利用的视图或者功能相近的视图归于一个View,对于Backbone,每一个model都要对应一个View.父层View负责布局,并将 ...
- ES6 常用总结(前端开发js技术进阶提升总结)
一.变量声明const和let 在ES6之前,我们都是用var关键字声明变量.无论声明在何处,都会被视为声明在函数的最顶部(不在函数的最顶部就在全局作用域的最顶部).这就是函数变量提升例如: 不用关心 ...
- WEB前端开发流程总结
作者声明:本博客中所写的文章,都是博主自学过程的笔记,参考了很多的学习资料,学习资料和笔记会注明出处,所有的内容都以交流学习为主.有不正确的地方,欢迎批评指正 WEB前端开发项目流程总结 1.新建项目 ...
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_16-CMS前端工程创建-导入系统管理前端工程
提供了基于脚手架封装好的前端工程 H:\BaiDu\黑马传智JavaEE57期 2019最新基础+就业+在职加薪\阶段5 3.微服务项目[学成在线]·\day02 CMS前端开发\资料\xc-ui-p ...
- 前端开发入门到进阶第二集【emmet插件的使用技巧】
Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具.基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为"片段".虽然片段能很好 ...
随机推荐
- 性能测试vs负载测试vs压力测试
下面我们主要介绍性能测试.负载测试和压力测试. 效率作为ISO 9126内部和外部质量的重要质量属性之一,其含义是在规定条件下,相对于所用的资源的数量,软件产品可提供适当性能的能力.资源可能包括其他软 ...
- JPA(五):映射关联关系------映射单向多对一的关联关系
映射单向多对一的关联关系 新建Customer.java: package com.dx.jpa.singlemanytoone; import java.util.Date; import java ...
- Android OpenGL ES和OpenGL一起学(二)------理解Viewport(视口)和坐标系Android OpenGL ES篇(转帖)
来自:http://www.cnblogs.com/xiaobo68688/archive/2011/12/01/2269985.html 首先我们在屏幕中心显示一个矩形,效果如图: // 代 ...
- 在Excel中输入超过10的带圈数字
通过改变字体,可以在excel中输入1-20的带圈数字.对于某些人这些还不够用,那怎么办呢? 有了下面这个不知道是哪个大神做的字体,你就可以直接输到100啦 将字体文件文件粘贴至“C:\WINDOWS ...
- .geodatabase与gdb的相互转换
.geodatabase长得是gdb的全称,确实它们有一定的关系,但也有区别. 简单认识一下 有人也问过我,gdb外表像个文件夹,是怎么实现的.gdb数据库是ESRI特有的数据库,它是一些数据集定义. ...
- 【树莓派】【转】树莓派3装Android 6.0,支持Wi-Fi和蓝牙
树莓派3装Android 6.0,支持Wi-Fi和蓝牙 相信对于许多树莓派初学者(包括我)来说,Android系统的确是一个不错的选择.但国内这方面资源稀缺,经本人FQ苦寻,找到了老外的树莓派Andr ...
- LCD显示——点阵字体
Bitmap font 点阵字体是把每一个字符都分成16×16或24×24个点,然后用每个点的虚实来表示字符的轮廓. 点阵字体优点是显示速度快,不像矢量字体需要计算:其最大的缺点是不能放大,一旦放大后 ...
- Java之所有对象的公用方法>9.Always override hashCode when you override equals
You must override hashCode in every class that overrides equals.
- V-rep学习笔记:力传感器
VREP中可以添加力传感器,用于刚性连接在两个物体之间以测量这两个物体之间的作用力或力矩.如下图所示,力传感器可以测量沿着X.Y.Z三个坐标轴的力和力矩: [Forces and torques me ...
- 关于Java中子类调用父类方法
当一个类继承于另一个类,子类中没有父类的方法时.用子类的对象调用方法时,会首先在子类中查找,如果子类中没有改方法,再到父类中查找. 当一个方法只在父类中定义时,调用该方法时会使用父类中的属性. 如果该 ...