高手问答第 175 期 —— 沪江 iKcamp 团队前端高效开发实践分享

局长 发布于 2017/10/31 18:44
阅读 2K+
收藏 7

OSCHINA 本期高手问答(11 月 1 日 - 11 月 7 日)我们请来了@iKcamp团队为大家解答关于移动 Web 前端高效开发方面的问题。

“iKcamp团队”由沪江 Web 前端团队中热爱原创和翻译的小伙伴发起,成立于2016年7月,“iK”代表布兰登•艾克(JavaScript 之父)。追随 JavaScript 这门语言所秉持的精神,崇尚开放和自由的我们一同工作、分享、创作,等候更多有趣跳动的灵魂。

国内从2012年开始,移动端设备流量呈现大面积爆发式增长,到2017年已经达到 75%,预计2018年这一比例会达到 79%。在移动的浪潮下,前端工程师的战场面临着一次巨大的迁移,区别于传统的 PC 端 Web 开发,移动终端给前端工程师带来了新的挑战,但更多的是机遇。令人激动的是,前端工程师是一群一直信奉“Stay Hungry, Stay Foolish”的伙伴,充满激情和活力,时刻拥抱变化,追求人机交互的极致。

恍若隔世,犹记得在 Internet Explorer 6 时代,前端工程师忙碌于兼容各种奇异浏览器,受困于职业的被误解,受限于业务场景的单一,壮志未酬的身影。时至今日,前端领域技术栈日渐宽广和深厚,向后有基于 Node.js 的大规模前后端分离实践,向前有基于 React Native 或 Weex 的多端融合方案,从 PC 端到移动端有大量优秀 MV* 类框架的探索和应用,身后有诸如 Webpack 或 Rollup 的工程化支持。作为这个时代身处移动变革中的前端工程师的我们,应保持信仰,不断学习前进,努力构建一个精彩的多元化世界。

本期问答内容:

  1. 前端工程化
  2. 前端单元测试
  3. 前端性能优化
  4. 前端框架类库
  5. 移动端混合式开发

或有其他相关问题,也欢迎大家积极提问!

为了鼓励踊跃提问,@博文视点 会在问答结束后从提问者中抽取 5 名幸运会员赠予《移动Web前端高效开发实战》一书。

购买链接:https://item.jd.com/12170351.html

OSChina 高手问答一贯的风格,不欢迎任何与主题无关的讨论和喷子。
下面欢迎大家就 Web 前端方面的问题向@iKcamp团队提问,请直接回帖提问。

加载中
1
博文视点
博文视点

高手问答第 175 期 —— 高手问答第 175 期 —— 沪江 iKcamp 团队前端高效开发实践分享

@fly071727  @刘亚涛  @idisikx  @孤月蓝风  @巴小杰  

恭喜以上五位网友或获得《移动Web前端高效开发实战》图书一本 

请私信 @博文视点   告知快递信息(格式:姓名+电话+地址)! 

孤月蓝风
孤月蓝风
一直只关注私信,没来帖子里看,现在才发现中奖了。太幸运了,感谢
Crazy罗小杰
Crazy罗小杰
回复@博文视点 : ,幸运哎,3QS。
1
f
fly071727

@iKcamp作为17年刚毕业的我,虽然参加了前端的培训,然后也就业了,可是在公司,就没有用公司提供的东西把该做的做了,感觉自己真的就像搬砖的,自己还是什么都不会,很迷茫,想跳出这样的模式,学习和接触新的东西,可是又无从下手,力不从心的感觉,不知道有没有好的建议给我

iKcamp
iKcamp
你好,小伙伴,其实学习无处不在。工作之后的学习不再是学院派,不能觉得只有抱着一本书安安静静看才是学习。公司提供的框架也是可以学习的对象,你可以看看源码,弄懂其中的原理,然后问问自己,如果你去写这个框架会怎么写,你可以着手写一个简单的。无从下手是因为你接触的还是太少,不过不要着急,千里之行始于足下。学习编程最好的方式,还是实践,无论学习什么新技术,一定要带着项目去学。希望能帮助到你~
1
iKcamp
iKcamp

引用来自“myw31415926”的评论

@iKcamp 您好!现在很多公司为了推出自己的产品,都会单独开发出一个Android/Apple的APP,里面都提供了丰富的功能。那么移动Web前端有哪些优势,仅仅是免去了各种各样APP的安装吗?还有,移动Web前端的就业前景如何?期待您的回答。

 

引用本书的一张图。

选择某个方向,最简单的方式是看行业(尤其是招聘市场的动态)

 

就技术方向而言,下面列举了 “移动Web和原生应用的优劣势”,供你参考~

1. 移动Web的优势

  • 跨平台:网页应用运行在浏览器上,不直接跟系统打交道,只要系统安装了浏览器,就可以打开该应用。
  • 开发成本低:因为没有平台问题,开发者不需要掌握多种开发语言和框架。只需要一个开发团队,就可以完成所有移动设备的前端开发工作。
  • 更容易迭代:应用所有资源都在服务端,不需要用户主动安装更新就可以实现产品的升级迭代。

2. 移动Web的劣势

  • 功能有限:因为没有直接跟系统对接,只能使用浏览器提供的部分功能,很多硬件设备独特功能无法使用。
  • 操作体验欠佳:由于运行在浏览器之上,用户的操作并非由系统直接接收并响应,再加上浏览器质量参差不齐,操作体验势必有所下降。
  • 无法离线使用:虽然HTML 5提供了离线存储功能,但并不代表用户在首次访问应用时,本地已经存在。
  • 很难被发现:用户获取APP的方式一般通过前往应用商店下载,Web APP并不具备在商店展示的条件。

3. 原生应用的优势

  • 功能完善:几乎具有设备所有功能的访问权限,可以满足用户的各种需求。
  • 体验更好:速度快、性能高,使得原生应用的用户体验更具优势。
  • 可离线使用:由于原生应用的所有程序代码和静态资源在用户安装时已经下载到本地,即便断网的情况下,用户也可以进行部分操作。
  • 发现机会高:无论是第一次下载(从应用商店),还是再一次使用(从设备图标打开),原生应用的机会都远大于Web应用。

4. 原生应用的劣势

  • 开发成本高:有多少操作系统,就需要开发多少套应用程序,不仅开发成本很高,维护成本也不容忽视。
  • 迭代不可控:首先更新上线需要应用商店的审核,其次用户何时升级也是完全不受控制的。
  • 内容限制:各应用商店都有自己的规范条例,原生应用的功能和内容需要完全符合这些条例才允许上架。

鉴于Web应用和原生应用各自的优劣势,已经有越来越多的APP开始走向混合开发的模式,即原生和Web同时存在。原生部分为用户提供更好的使用体验,Web部分可以实现更为快速的迭代更新。

iKcamp
iKcamp
👍
myw31415926
myw31415926
谢谢您详细的回答。我明白您的意思了,不管是移动Web还是原生应用,都互有优势。选择一个自己喜欢的,动手做就行了,对吧?谢谢您的鼓励 ~~stay hungry stay foolish~~
1
iKcamp
iKcamp

引用来自“倾译917”的评论

@iKcamp  关于前端性能优化方面,有没有什么好的经验可以分享呢,谢谢

 本书“第13章  前端性能优化实战“,有相关的介绍,除了过往PC时代的Yahoo性能优化法则,还列举了一些移动端Web的建议。

你可以参考本书目录:
第13章 前端性能优化实战 480

  • 13.1 常用网站性能优化指标 480
    • 13.1.1 网页的资源请求与加载阶段 481
    • 13.1.2 网页渲染阶段 482
    • 13.1.3 JavaScript脚本的执行速度 484
  • 13.2 依旧有效的Yahoo性能优化法则 484
  • 13.3 性能优化工具使用实战 486
    • 13.3.1 YSlow 486
    • 13.3.2 PageSpeed 487
    • 13.3.3 WebPagetest 488
  • 13.4 HTTP协议头缓存实战 489
    • 13.4.1 客户端缓存流程 489
    • 13.4.2 缓存协议内容 490
    • 13.4.3 实战演练:HTTP缓存 491
  • 13.5 资源按需加载实战 492
    • 13.5.1 基于RequireJS的按需加载 492
    • 13.5.2 基于Webpack的按需加载 493
    • 13.5.3 图片懒加载 494
  • 13.6 不同网络类型的优化实战 495
    • 13.6.1 获取网络类型 495
    • 13.6.2 弱网图片优化 496
    • 13.6.3 弱网缓存优化 496
  • 13.7 实战演练:Nginx配置Combo合并HTTP请求 497
    • 13.7.1 安装Nginx和文件合并模块 498
    • 13.7.2 配置Nginx和Combo 499
  • 13.8 本章小结 499

书中的内容应该对你有所帮助~

1
柯南和由美
柯南和由美

@iKcamp  react.js出了协议那回事后,现在你们前端团队还用吗?你们招聘前端都要求会哪些前端框架更好?

iKcamp
iKcamp
框架需要了解主流,有相关的实战经验。同时,我们更看中候选人的前端基础知识。
iKcamp
iKcamp
react.js事件,最终以FB退让结束,我们还继续使用react,它也是沪江主要的前端技术框架。
1
放羊
放羊

@iKcamp 如果浏览器有一天支持了es6,es7的标准,现在的框架是不是将来都会弱化了

iKcamp
iKcamp
啊哈~别忘记了,还有一堆浏览器厂商呢(新特性的支持程度不尽相同)。不过,如果开发想提前使用es6和es7进行开发,目前也是可行的,可以使用babel~
1
刘亚涛
刘亚涛

@iKcamp 前后端分离的时候有必要使用node中间层吗?服务端渲染是使用nuxt还是使用easywebpack-cli比较好?

iKcamp
iKcamp
选择框架一般的依据:是否满足业务、接入成本。next是一套基于Vue的后端渲染框架,而easywebpack-cli是一个脚手架,两者的侧重点不一样。采用脚手架能够很快的搭建一个项目的雏型,但所用的方案/框架还是的另行掌握。
iKcamp
iKcamp
前后端分离的两个阶段:1. 采用SPA的方式,在前端渲染页面。2. 采用 Node 端渲染页面。 引入Node,需要应对一些风险:团队(开发、运维等)的能力,基础设施是否健全(日志、监控等),如何控制 Node 的质量风险。另外,和SPA相比较,Node端渲染提供了SEO支持和更好的首屏性能,这些是否很紧迫
1
土卫十六
土卫十六

@iKcamp 不好意思,插嘴问一下,沪江PC客户端到底是用MFC开发的,还是Qt开发的?我怎么看招人的时候,两种技术都需要呢?感觉有点莫名其妙。

iKcamp
iKcamp
回复 @土卫十六 : (づ ̄3 ̄)づ╭❤~
土卫十六
土卫十六
回复 @iKcamp : 谢谢。希望以后有机会成为同事。另外,我会买你的书看一看,前端入门就靠你啦!
iKcamp
iKcamp
目前沪江的客户端是用DirectUI开发的,招聘要求MFC技术,是因为有相关的技术背景,可以更好的理解。而Qt,可能是以后技术迁移的方向。
0
xpbob
xpbob

@iKcamp  前端技术越来越多了,感觉有点让人摸不到发展趋势

iKcamp
iKcamp
百花齐放,百家争鸣,这正是前端的魅力之一。但是万变不离其宗,把基础打牢是肯定不会错的。然后挑一个框架重点研究,触类旁通。
0
cx45ghty89
cx45ghty89
作为自学前端的大二学生,已经掌握了HTML,CSS,JavaScript,但是一做复杂的页面,还是力不从心,元素定位很痛苦,感觉还是Android的页面设计容易,目前只接触了bootstrap框架,请问继续学习其他前端框架,前端开发会变得和安卓UI设计一样简单吗?
iKcamp
iKcamp
切图是一门学问,需要经验,勤加练习是正道。可以看看优秀网站的css写法,写得多了就有感觉了。当然,优秀的UI框架也是很好学习材料哦。你还可以学习less、sass等工具来提高效率和增加编码愉悦感~
梅气灶
梅气灶
还是得要多学习学习nodejs和三大框架,bootstrap的话,都是拿来即用的东西,强烈建议去看看里面的源码,对你学习css很有帮助
返回顶部
顶部