AMP 开发体验洗白之路

2020-01-15 作者 : 任家乐 AMP

难用 or 姿势不对？

「用户体验 > 开发体验」Google AMP 的设计准则毫不掩饰地标记了它的核心观念，从一开始就承认了它对开发者的不友好。

「Webnovel m 站」作为国内首批使用 AMP 技术的产品「关于 AMP，Webnovel 都做了什么？」之一，结论上创造了显著提升的性能数据，过程中正如谷歌核心观点所说，开发体验非常差。最近得来一次机会，我们 Webnovel 面向非洲用户的新产品「Ficool m 站」实践了全站 AMP，从中找到了使用 AMP 的新姿势 - 「Next.js + AMP + Preact」，开发体验提升了不止一个档次，在此分享给大家。

网文出海 • 书封自动化实践

2019-10-14 作者 : 郑成忠 REACT

背景简介

I nkstone 是一个面向海外原创作家和翻译的创作平台。大量的作家和作品，意味着大量的书封制作需求。这之前是需要设计师投入精力，或者花钱购买来解决的，淘宝的 5 元书封，说便宜也不便宜，和用户自己上传的书封一样，不保证版权方面没有问题，存在着各种风险。而此时浏览器端书封制作系统成为了我们解决这个需求的一大利器。作家只需要登录我们 I**nkstone** 「海外作家创作平台」，短短几步就能制作出一个精美的有版权书封。

非常规 - VUE 实现特定场景的主题切换

2019-08-15 作者 : 刘文涛 VUE

实现页面皮肤切换，常见的方案有几种：替换 css 链接、替换 className、改变 css 原生变量值、使用 less.modifyVars、props 参数下发等；
不同的业务场景，我们一般会选择不同的方法来实现目标。最近在公司运营活动平台上的主题功能的实现，我们尝试了一种新的解决方案，实现了页面主题的切换，目标是为了提高项目的可维护性、可扩展性，以及降低接入复杂度。

关于 AMP Story，你需要知道这些

2019-05-22 作者 : 杨芯芯 AMP

在我们的 AMP 改版过程中，我们发现了一些新的 AMP 组件，并针对部分组件做了一些尝试。其中就包括 AMP Story。AMP Story 是 AMP 的一种新的网页展现形式。

成果展示

在介绍 AMP Story 之前，大家可以先看一下，我们基于 AMP Story 技术做的一个 Demo 页面。下面是我们做的一个关于 Tour Of Wenbovel 主题的一个 AMP Story 页面。对用户来说，与传统的单纯文字和图片不一样，它提供了一种沉浸式的 Web 体验。

关于 AMP，Webnovel 都做了些什么？

2019-05-14 作者 : 任家乐 AMP

引言

AMP 是什么？它全称 Accelerated Mobile Pages 「AMP」，是 Google 推出的一个加速网页加载的开源框架，我们在此也不做太多的介绍，具体可以看我们之前发的公众号文章。阅文前端团队作为国内最早践行 AMP 的开发团队之一，我们的 AMP 实践也经历了好几个大迭代，其成果也得到了 Google 官方的肯定，分别在 Google I/O 2019 和 AMP Conf 2019 大会上被 feature（图1-1），希望我们积累的经验可以给大家提供帮助。

Google AMP WebPackage 在 Webnovel 的应用

2019-04-19 作者 : 刘鹏 AMP

之前我们的文章（文章链接）也有介绍过，Webnovel （起点海外）在去年年初就将首页以及全部阅读页都接入了 Google 的 AMP 技术，并且从体验和数据上来说都取得了不错的效果。在去年年底我们又进行了一次迭代，把更多的阅读页内容也加入到了 AMP 当中。用户可以在 Google Search 当中搜索到我们的小说内容，并且很快就可以进行阅读。但是同时我们也发现了一些问题，用户在搜索结果的第一个落地页显示的内容是我们的，但是 URL 却是 Google 的 URL。虽然 Google 在顶部加了一个 m.webnovel.com 来源的标识，但是很多用户依然会误解，并且给我们的统一品牌宣传带来了影响。

面向体验的重构优化

2018-09-10 作者 : Ziven27 性能优化

前端重构程序员是一个关注代码同时还要留意体验的异类。代码的优化虽然难，但是有比较多的性能测试工具去证明优化的成果。然而体验这种东西，我们又要如何去证明它的好与坏呢？

一、视觉体验优化

页面加载
数据请求
图片渲染

二、数据证明体验效果

今天我着重会基于「webnovel」PC站点从以上两点给大家介绍，如何从体验的角度去做重构的优化，并如何用数据去证明你的优化是有效果的。

React Native 在元气阅读的实践

2018-08-01 作者 : 阅文集团前端团队 React Native

前言

经历了三个多月的集中开发，阅文集团旗下二次元产品「元气阅读」APP 终于在各大应用商店上架了。「元气阅读」APP 大部分的功能模块基于 React Native 开发，整个开发过程前端团队趟了不少 React Native 的坑，同时也积累了不少实践心得，与大家一起分享。

一、业务背景与技术选型

在使用 React Native （以下简称RN）之前，和业界大部分团队一样，我们 APP 的开发模式采用的是客户端（iOS/Android）内嵌 H5 的 Hybrid 开发模式。一开始，我们除了采用比较成熟的离线包方案管理静态资源，在首屏加载体验上我们也做了不少优化工作，但发现 H5 线上的体验和性能数据与原生还是有不少差距，所以我们决定引入新方案。

RN 和 Weex 已经是业界两个相对成熟的 Hybrid 解决方案，基本能满足我们的需求：

起点海外版 Hybrid App－内嵌页优化实践

2018-06-25 作者 : 刘文涛 Hybrid

今年年初我司开启了起点品牌的海外之旅，名为「 Webnovel 」。

目前 PC / M站 / App 三端都在快速的迭代中。而其中起点海外版 App 是基于 Hybird 技术进行开发的。作为起点海外 Hybird App 中内嵌页的前端开发，从 1.0.0 版本的陌生，到最近发布的 2.0.0 版本的娴熟，海外版内嵌页的开发方式一直都在改进，力求最大程度的接近 Native App 的页面性能和用户体验。