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

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

Read More >>

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

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

成果展示

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

Read More >>

关于 AMP,Webnovel 都做了些什么?

引言

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

Read More >>

Google AMP WebPackage 在 Webnovel 的应用

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

Read More >>

面向体验的重构优化

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

一、视觉体验优化

  1. 页面加载
  2. 数据请求
  3. 图片渲染

二、数据证明体验效果

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

Read More >>

React Native 在元气阅读的实践

前言

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

一、业务背景与技术选型

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

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

Read More >>

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

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

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

Read More >>

是时候好好安利下 LuLu UI 框架了!

你问我有什么不同?

只是更自由,更纯粹,和用户走得更近。

官方网站:https://l-ui.com/

项目主页:https://github.com/yued-fe/lulu

API文档:LuLu UI API中文文档

你好,LuLu!

LuLu UI 是一个基于 jQuery,针对 PC 网站,兼容 IE8+ 或 IE7+ 的前端 UI 框架,包含 20+ 静态或动态 UI 组件。

Read More >>

阅读体验优化之起点阅读页

阅读页作为小说阅读类网站访问量很高的页面,阅读体验上的优化是至关重要的。我有幸在起点项目中负责阅读页的前端开发,成就感满满。

起点中文网访问地址:https://www.qidian.com ,欢迎体验!

在整个起点项目已经有很完善的性能优化体系的情况下,阅读页在改版之后,页面性能统计数据如下:

Read More >>