班会第 47 期

[ufologist]

• 技术

  • lottie-android

    

    请问下面的动画, 你用 JS 实现要多久时间? 1天, 2天, 还是一个星期? 还是从入门到放弃?

    然而自从有了 lottie, 从此再也不用为实现 UI 设计师的动画头疼了

    

    这个项目碉堡了

    Lottie安卓开源动画库使用
    

    Lottie is an Android, iOS, and React Native library that renders Adobe After Effects animations in real time, and allows native apps to use animations as easily as they use static assets.

    Lottie uses animation data exported as JSON files from an open-source After Effects extension called Bodymovin. The extension is bundled with a JavaScript player that can render the animations on the web.

    All of these animations were created in After Effects, exported with Bodymovin, and rendered natively with no additional engineering effort.

    Bodymovin is an After Effects plugin created by Hernan Torrisi that exports After effects files as json and includes a javascript web player.
    We've built on top of his great work to extend its usage to Android, iOS, and React Native.

    bodymovin.loadAnimation({
        container: element, // the dom element
        renderer: 'svg', // canvas, html
        loop: true,
        autoplay: true,
        animationData: JSON.parse(animationData) // the animation data
    });

    See examples on codepen

  • 回首2016, 展望2017

    • 前端框架阵营图 - 2016

      

    • 2016年JavaScript领域中最受欢迎的“明星”们

      JS.ORG分析了bestof.js.org的项目，这是一个与网络平台相关的最佳项目的精选列表。

      • Most Popular Projects in 2016

        • 3个UI框架：Vue.JS、React、Angular 2
        • 新的node.js包管理器：Yarn
        • 构建桌面应用程序的领先解决方案：Electron
        • 快速启动新的React项目的解决方案：Create React App
        • 移动框架：React Native
        • 最著名的CSS工具包：Bootstrap
        • 基于函数概念的状态管理库：Redux
        • 强大灵活的图表库：D3

        而2016年的王者是 Vue.JS, 看来Vue.JS采用了最好的React（组件方法）和AngularJS（模板是html代码增强的框架特性）。

      • Front-end Frameworks

        在这个类别中混合了两种类型的项目

        • 完整的框架包含了所有功能，能够创建一个现代的Web应用程序（路由、数据提取、状态管理）。AngularJS、Angular 2、Ember或Aurelia都属于这一类。
        • 更轻量级的解决方案专注于UI层，如React、Vue.JS、Inferno……

        与其选择“开箱即用”的所有功能的完整框架，2016年开发商更倾向轻量级的方案，并喜欢组成自己的方案——“点菜”。

      • Node.js Frameworks

        2016年，使用以下解决方案创建和部署node.js应用程序从未如此简单：

        • Now
        • Webtask.io
        • Stdlib

        像Gomix这样的项目甚至降低了node.js世界的门槛，使得任何人都可以在浏览器中轻松点击几下来编写和共享 node.js代码。

      • React Boilerplates

        React是一个伟大的UI库，但使用React和现代Web开发工作流工具需要大量的配置

      • Mobile

        JavaScript无处不在，你可以使用技术Web开发人员已知的任何技术（HTML、JavaScript、CSS）构建移动应用程序

        在2017年密切关注的一个项目：Weex，一个构建在Vue.JS之上的移动跨平台UI框架。

      • Compilers

        编译器允许开发人员使用最新版本的JavaScript（ES6）编写代码，而无须担心浏览器的支持

      • Build Tools

        在2016年，很难想象一个没有任何构建过程的Web应用程序。通常需要一个构建过程来编译模板和优化资源，以便在生产环境中运行Web应用程序

      • Testing Frameworks

        最著名的两个测试框架是Jasmine和Mocha，但最近的两个项目在2016年有更多的牵引力：AVA和Jest

      • IDE

        流行的IDE Visual Studio Code和Atom是使用Web技术开发的开源项目

      • Static Site Generators

        静态网站生成器（Static site generators，SSG）是生成一系列.html、.css和JavaScript文件的工具，您可以在任何简单的Web服务器（Apache或NGNX）上部署，无需设置数据库或任何网络框架

        静态网站具备快速性、健壮性和易维护性

        SSG非常受欢迎，因为有很多很好的解决方案来主持静态网站免费

        • Github pages
        • Coding Pages 免费的静态网页托管和演示服务
        • Gitlab pages
        • Netlify
        • Surge
        • Now static

        在2016年，使用node.js构建的最流行的SSG是Hexo。它是一个彻底的SSG，接近CMS系统，可用于构建一个博客，如Wordpress。它有很多功能，包括国际化插件。

    • 2016 前端技术发展回顾

      • 网络技术
        • HTTP/2
      • 软件环境

        • 淘汰 IE8

        • Electron/NW.js

          web 开发技术引入到了桌面端 APP 当中, 使得开发一个跨平台（Window/Linux/Mac）的应用变得可及和简单, web 开发工程师也成为了桌面端开发者的一部分

        • Mobile Native App

          • React Native: Facebook 试图使用 web 技术解决传统移动 App 更新限于发版，传统 H5 页面受制于性能的新解决方案
          • Weex
          • NativeScript
          • 微信小程序

        • Node

          风雨中已经走过 6 年, 除了服务端的开发，Node 作为开发工具上的用途也越来越重要

        • WebVR

          2016 年被称作虚拟现实（VR）元年, 以全息投影为代表的增强现实（AR）技术, 大家都看到了 VR/AR 的巨大潜力并且对其投入重资，而对于 Web 开发来说，WebVR 也毫无疑问将会成为未来一个重要的战场, WebVR API 规范提供了专门访问 VR 硬件的接口，让开发者能构建舒适的 VR 体验

    • 2016前端探索总结——前端工程与未来

      • Angular1.x慢慢退出舞台，Angular2、React、Vue等新兴的MVVM框架已接近成熟
      • 以Redux和Vuex为代表的类Flux设计架构，经过一年的探索和实践，其在开发效率和维护追踪上的优势已被验证，取代MVC成为了中大型web应用中最流行的框架模式
      • Webpack、Rollup等包管理工具已是工程必备，ES6和Babel普及度已经很高了，前端开发完成从页面到组件化模块化、从解释型到构建型的工程性转变

      以最佳实践为基础，再增量考察和评估额外的工具引入成本

      • 对于非常轻的页面，如H5、活动页面，最佳实践一般是Jquery或zepto+UI库
      • 开发单页面应用，一般来说是以数据交互为主的需求。Vue全家桶的最佳实践是Webpack+Vue（单文件组件解决方案）+Vue-router。React全家桶的最佳实践是Webpack+React+React-router。以此为基准，综合项目预期成本，再考虑加入UI库、Babel、Redux（Vuex）带来的额外复杂度和消弭应用内在复杂度之间的平衡关系

      这样的好处是基本跳过最佳实践的复杂度评估，直接对风险较高、把握较低的复杂度部分进行评估，节省了决策成本

      • 一般来说，最佳实践是在各种工具的组合下，复杂度最低的方案。
      • 最佳实践本身包含了前人的决策经验和教训，没有必要花过多时间来做重复地评估决策。

      另外，以上所说的“最佳实践”，有两点需要注意的地方：

      • 重点不是在best，而是在experience。不要陷入了找寻最优解的泥潭。
      • “最佳”不是绝对概念，而是相对概念。一定要针对个人（团队）的情况来考虑何为“最佳”。

      在未来，也许你的公司不再需要同时组件Web、IOS、Android三支开发队伍，取而代之的是一支大前端团队。

    • 前端工程化体系

      何谓前端工程化？即根据业务特点，将前端开发流程规范化、标准化。它主要包含不同业务场景的技术选型、代码规范、构建发布方案等。主要目地是为了提升前端开发工程师的开发效率与代码质量，降低前后端联调的沟通成本，使得前后端工程师更加专注于自身擅长领域。

      • 前端开发应该是“自成体系”的，包括运维布署、日志监控等
      • 针对不同的场景有不同的解决方案，并不是一套大而全的框架体系。比如针对以产品宣传展示为主的网页(Site)，采用多页模式和响应式设计开发；以用户交互为主的且无强烈 SEO 要求的应用(Application)，采用单页模式开发
      • 产品组件化，为提高复用性尽量将组件的颗粒度分细一些，且低耦合高内聚
      • 避免重复造轮子，引入一些优秀的开源资源，取长补短

      大致将前端工程体系分为三大块：

      

      • Node 服务层：主要做数据的代理和 Mock，url 的路由分发，还有模板渲染

        做为中转站将 http 请求和响应传输于前后两端，起到桥梁作用

      • Web 应用开发层：主要专注 Web 交互体验

        这一部分应该是前端工程师的专长部分，也是其核心价值的体现之处

        • 组件化和工程化

          正是 js 的模块化的可能性，成为了 web 功能模块（包含界面与交互）的组件化实现的基石

          通过可模块化的“高级版” js，将一切资源进行串联，形成一系列业务或非业务组件，它们通过倚赖注入与模块输出、通过编译转换、通过合并或重组，最终生成浏览器可解析的代码

        • 模型驱动视图

          从手动操作 DOM 到数据绑定 + Virtual DOM 的转变

          MDV 模式下很自然的就将 web 页面看做是一台状态机（State Machine），UI = f(state)， 界面上的变化皆由状态变化所导致，状态的变化来源一定为 M，即数据模型

          我们将手动操作 DOM 的工作交给 MVVM 框架的数据绑定来做，界面的改变由数据的变化而自动完成，不仅十分高效，而且我们对于数据的流向更加清晰可控

          在引入严格的函数式编程与不可变数据（immutable.js）后，还能使得结果可预测，方便做单元测试

        • 我们的主战场也就是浏览器（可以看作是我们前端代码的运行环境）

          最主要的战场，是 Webkit

      • 前端运维层：构建布署、日志监控等

        前端的布署主要分静态和动态两部分

        • 静态主要是指一些静态资源，布署也比较简单，就是往 CDN 服务器上放即可
        • 动态就是 Node 服务层的东西

      有机会就尝试，但做为技术人，首要任务还是方案落地和解决实际的业务问题

    • 2016-我的前端之路:工具化与工程化

      希望能够尽可能地脱离工具的束缚，回归到前端工程化的本身，回归到语言的本身，无论React、AngularJS、VueJS，它们更多的意义是辅助开发，为不同的项目选择合适的工具，而不是执念于工具本身。

      总结而言，目前前端工具化已经进入到了非常繁荣的时代，随之而来很多前端开发者也甚为苦恼，疲于学习

      • 工具化的意义

        Vue最大的优势在于其渐进式的思想与更为友好的学习曲线，Angular 2最大的优势其兼容并包形成了完整的开箱即用的All-in-one框架，而这两点优势在某些情况下反而也是其劣势，也是部分人选用React的理由

      • 函数式思维：抽象与直观

      • 前后端分离与全栈:技术与人

      • 相辅相成的客户端渲染与服务端渲染

      • 前端的工程化需求

        所谓工程化，即是面向某个产品需求的技术架构与项目组织，工程化的根本目标即是以尽可能快的速度实现可信赖的产品。尽可能短的时间包括开发速度、部署速度与重构速度，而可信赖又在于产品的可测试性、可变性以及Bug的重现与定位。

        • 开发速度
        • 部署速度
        • 重构速度
        • 可测试性
        • 可变性
        • Bug的重现与定位

        在技术架构上，我们会关注于：

        • 功能的模块化与界面的组件化
        • 统一的开发规范与代码样式风格，能够在遵循SRP单一职责原则的前提下以最少的代码实现所需要的功能，即保证合理的关注点分离。
        • 代码的可测试性
        • 方便共享的代码库与依赖管理工具
        • 持续集成与部署
        • 项目的线上质量保障

        当我们落地到前端时，笔者在历年的实践中感受到以下几个突出的问题：

        • 前后端业务逻辑衔接
        • 多业务系统的组件复用
        • 多平台适配与代码复用

        从前端的项目类别上来看，可以分为以下几类：

        • 大型Web应用：业务功能极其复杂，使用Vue，React，Angular这种MVVM的框架后，在开发过程中，组件必然越来越多，父子组件之间的通信，子组件之间的通信频率都会大大增加。如何管理这些组件之间的数据流动就会成为这类WebApp的最大难点。
        • Hybrid Web APP：矛盾点在于性能与用户验证等。
        • 活动页面
        • 游戏

      • 回归现实的前端开发计划

        

      • 渐进的状态管理

      • 渐进的前端架构

      • 线上质量保障：前端之难，不在前端

  • 前端开发者进阶之路

    从毕业到现在也工作了一年多了，在这一年多里面，我感觉我是很幸运的，有和谐的团队氛围、哲学的leader和开放的环境。

    在这样的环境中，我的成长不仅仅局限于技术栈的积累，更重要的是收获了一个清晰的发展方向，让自己在前端的道路上看的更远，更清晰

    • 可用

      有多少人是和我一样，因为简单的几行HTML+CSS，花费极短的时间就可以看到一个酷炫的页面而爱上前端的？正因为在大学期间有幸接触到html让我爱上了前端的及时性，远远比枯燥的C/C++/Java有趣多了，动动手指就可以看到效果，难道不是一件让人很兴奋的事情吗？

      初入前端，自以为能写几行html+css构建一个页面就是已经很有成就感了，在加上JS/JQ做点动效就天下我有的感觉。在这个阶段我们想的很简单，这段代码能用就行。我们看到写出来代码能够在浏览器上跑起来，这已经是成功了。这个阶段我们不奢求什么，也没有想多复杂，只要能看到效果就是成功了。此阶段，拥有舍我其谁的傲气，觉得自己无所不能（说笑哈）。

    • 优雅

      经历过一段前端生涯后，回头看看自己写的代码，你会发现真的是不堪入目，暗自耻笑自己当初坐井观天（我当初还在想其他人看到我这么糟糕的代码会怎么吐槽我）！

      这个时候，你会开始思考如何写一段优雅代码，一段不会让自己都觉得恶心的代码。这个阶段其实很重要，因为这可能会决定你很久一段时间的代码风格。

      何为优雅的代码，这是仁者见，仁智者见智了，但我觉得基本的要求应该是简单有效、逻辑清晰、可维护

      • 理解需求：你需要清除的明白这个需求要求有什么效果、实现什么功能、解决什么问题
      • 思考逻辑
      • 技术选型（可行性分析）：分析哪种前端技术适合这个项目，既能保证项目质量和性能，又能提高开发效率

    • 性能

      在你能编写一手优雅的代码之后，你就必须关注性能方面了。如何提高性能是区别技术水平的一个重要指标

      其实想要提高性能，并没有多大的门槛，很多小的细节都可以优化性能，这些都需要大家平时去积累去探索，久而久之，你会发现自己并不需要刻意去优化什么，但是写出来的代码性能却比别人要好

    • 用户体验

      用户体验这已经不是关系代码层面了，而是在一个思想领域的提升。这种思想应该从一而终的贯彻到我们的生涯中，必须时刻在我们的开发中体现

      用户体验是前端开发开发者必须承担的职责，我们是最接近用户的开发者，用户体验的细节最直接的是从我们这里体现。所以这就要求我们必须站在用户角度的思考问题，在工作中，我们不能够拿到需求就直接进行开发，而是需要对用户体验进行深入思考，如果存在交互或者设计问题我们应该及时提出，想设计和产品反馈

      前端是贯穿整个产品的关键点，我们是最能发现问题的群体，所以这些都是需要我们去推动，只要有不合理的地方我们都应该提出质疑，去向产品、技术、设计去反馈，去推动用户体验的改善，而不是仅仅关心我们代码。

  • 个人博客，最终选择

    • Blog是个人的总结和记录， 对于我是倾向于技术方向。(排除简书)
    • 编写时，格式越简单越好，所以必然是markdown。（排除知乎专栏）
    • Blog写出来，要有人交流， 才能进步， 之前选择的hexo虽然有多说，但是码农不喜欢。
    • gitpress停止维护， ghost太折腾。
    • 最终还是选择了issue的方式， 也即此处， 虽然几乎没有流量导，不过无所谓， 专心自我总结。
    • 对segementfault的印象好了不少， 技术领域，还有人气都很不错。不过还是需要观察观察。如果segementfault能提供一种方式，博主在issue发表， segementfault自动git hook同步， 导点流量啥的， 大家互利。

• 产品

  • 创业公司绝对不会告诉你他们在用的工具们 | 西瓜设计研究所

    • 灵感搜集类
    • 思维导图、文档协作
    • UI 设计
    • Icon素材
    • 原型交互展示
    • CRM、表单制作工具
    • 微信公众号相关
    • H5 页面制作
    • 二维码生成器
    • 团队工作进度管理与协作
    • 客服、工单系统
    • 电商、建站工具
    • 项目资金众筹
    • 线下活动发布
    • 知识技能共享平台
    • 互联网新产品与资讯
    • 创业者社交平台
    • 流量分析工具
    • 网站权重查询
    • 招聘平台
    • 电脑租借
    • 联合办公空间
    • 福利

  • 小破公司到底要不要搞大数据？

    先上一个让你们无法反驳的理由，不过在此之前先上一个问题：小公司当前最急迫的需求是什么？

    • 有人可能会说是流量，流量上去了才有发展的可能，听起来好像是没错。
    • 有人可能会说是商业模式，商业模式跑通了才能有变现赚钱的机会，好像也是这么回事。
    • 也有人可能会说是业务的进展...

    不过我想说的是统统没到点子上，小公司当前最急迫的事情就是：以良好的估值，顺利拿到下一阶段的融资，愉快的活下去。

    那么，融资与大数据有什么关系呢？

    关系可大发了，特别是在资本萧条的2016年，以及貌似寒冬依然会继续的2017年。在资本市场一顿不景气的这两年，大数据的话题已经成为了资本界少有的几个温暖投资点了

    我认为大数据更重要的是一种处理数据，解决问题的思路、模式，并且是有别于传统应用数据的方式，以及思考问题的方式。