双十一来临,新秀电商的前端开发如何应对公司“月产出1000个页面”的巨额任务?

412 阅读6分钟

源于淘宝商城2009年11月11日举办的网络促销活动逐步演变成为现在购物狂欢节,近些年双十一活动已经影响到了国际电子商务行业,同时在中国也诞生了大大小小的电商平台,面对双十一期间万紫千红的电商页面,如何让自己的平台能给消费者带来一场视觉盛宴,提高消费者购买欲望,是新秀电商一直密切关注的痛点。

淘宝以及其他各大电商平台在每年双十一期间都会生成大量的电商页面作为消费者进入电商平台的入口通道,产出丰富多彩的电商页面,无疑是解决消费者审美疲劳的唯一方式,从而提高消费者的参与率、购买率,但是面对如此巨大的页面产量,一般的新秀电商肯定无法承担,没关系,今天我们给大家解答新秀电商如何在双十一期间做到低成本、高效率、高产出。

客户简介

高颜(深圳)科技有限公司是一家致力于互联网电子交易、零售以及电商服务的互联网公司,面对如火如荼的电商行业,他们能做的只有付出更多成本来并驱争先,以往每年他们都会雇佣大量前端开发人员,但是今年他们采用了CodeFun这款前端开发工具,并且极大的压缩了开发成本。

目前高颜的前端成员仅有四位,使用技术栈有React/taro/原生小程序

使用情况

  • 开发效率

下图为公司4位前端1小时产出量对比

高颜从3月份开始使用CodeFun进行开发,上图是高颜提供的开发效率数据,根据高颜技术总监口述,在使用CodeFun之前,他们前端开发1小时产出页面余额为4.1个,但是从上图数据情况显示在使用CodeFun之后小时产出量为约为44个,整体效率提升10倍左右。

  • CodeFun月产出

未使用CodeFun月产出

使用CodeFun月产出

目前高颜前端团队成员为4人,据不完全统计在使用CodeFun后单月总产出前端页面约为1282个

为什么用CodeFun?

据高颜技术总监回应,目前公司后端团队针对于市场常见应用场景已经打造了多个高扩展性,高复用性系统,但是前端页面的多样性直接影响到了公司产出,虽然市场上有很多成熟的低代码产品,但是还是无法从根源解决前端页面的多样性、复杂性,所以选择CodeFun,可以快速还原设计图,减轻前端开发成本,从根源上增加公司产出。

CodeFun的适用场景

  • 小程序场景
  • H5场景
  • 以及其他前端技术栈包括(Vue/React/Taro/uni-app)

如何使用(步骤)

  • 第一步

由ui设计师使用Sketch插件或者ps插件上传设计图到CodeFun

  • 第二步

开发者打开CodeFun后台项目管理,并且选择页面进入详情页

  • 第三步

查看代码并且将生成代码复制到项目中

  • 整体流程演示

平时一个页面的设计到开发可能需要好几天能完成,但是使用了CodeFun以后,我们整个页面从上传到开发仅仅用了30S左右

CodeFun在运用中的优点

从上面的操作步骤我们可以看出CodeFun的操作步骤其实是及其简化的,对于开发者或者设计师是非常友好的,零成本学习即可进行使用,关于CodeFun的优势,我们还接到了很多客户反馈,包括以下几点

  • 代码实用性强

生成代码的实用性是CodeFun团队一直以来侧重关注的点,目前为止,代码实用性强也是CodeFun收到的最多评价,CodeFun团队从实际开发场景的角度,并且将用户的痛点与自己的目标进行拉齐,千锤百炼之后的CodeFun终于不负众望,做到了务实去华。

  • 代码兼容性强

CodeFun娘胎自带的像数功能转换也收到了不少好评,h5页面的适配绝对是令不少前端开发者疾首蹙頞的,但是CodeFun很贴心的提供了像数单位自由转换功能,同样的页面,可以生成rem、px、vw、vh的像数单位,为开发者直接解决适配问题

  • 代码扩展性强

关于代码的扩展性,可能是不少高级前端工程师所关心的,但是CodeFun所生成的代码恰恰是我们高级前端工程师日常中频繁书写的高扩展性代码,比如说像下图这样的列表,CodeFun生成的代码是使用数组渲染的视图代码

设计图

  • 生成代码

\\ 生成数组对象
  const data = { listkEfNnzl9: [null, null, null] };

  return (
    <div className={`flex-col ${styles['group_7']}`}>
     // map渲染
          {data.listkEfNnzl9.map((item, i) => (
            <div className={`${styles['list-item']} flex-col`} key={'item' + i}>
              // 冗余代码
            </div>
          ))}
        </div>
    </div>
  );
}


  • 预览功能强大

对于一些想迫切知道CodeFun所生成代码效果如何的同学,CodeFun提供了贴心的预览功能,不仅仅可以预览当前页面,还可预览整个项目的效果,包括小程序也可以在线预览,无需下载开发者工具。

  • 设计图还原度高

不少设计师对CodeFun还原设计稿的能力提出赞扬,大部分设计师表示自从前端使用了CodeFun以后,基本很少去走查前端页面,除非特殊的设计场景,但往往CodeFun都可以将各种复杂场景设计稿使用合理代码完美还原。让我们来看一些案例

  1. 案例一

  1. 案例二

CodeFun进阶指南

  • 区域切图

设计稿上传之后,CodeFun会根据设计图进行算法分析切图,或者可以由用户自行选择区域并且转化为PNG或者SVG

  • 自定义css类名

可以批量修改css类名

  • 资源管理器

强大的资源管理器,设计图切图均可一键下载

  • 页面跳转

页面之间有跳转交互的场景,也可以用CodeFun直接进行配置,并且生成相应的跳转代码

生成代码


// 跳转事件
  const text_8OnClick = () => {
    history.push('/index');
  };

  return (
  // 绑定跳转事件
    <span onClick={text_8OnClick} className={`${styles['text_6']}`}>
      三星(EQ92D) 入耳式线控耳机
    </span>
  );

官方寄语

如果您的团队或者您个人有使用CodeFun的经验和心得,欢迎在微信公众号后台留言,将有计划获得Code Fun更多权益。如果有使用疑问,欢迎入群。