QCon 演讲火热征集中,快来分享技术实践与洞见! 了解详情
写点什么

Gitter:高颜值 GitHub 小程序客户端诞生记

  • 2019-02-25
  • 本文字数:3852 字

    阅读完需:约 13 分钟

Gitter:高颜值GitHub小程序客户端诞生记

前言

嗯,可能一进来大部分人都会觉得,为什么还会有人重复造轮子,GitHub 第三方客户端都已经烂大街啦。确实,一开始我自己也是这么觉得的,也问过自己是否真的有意义再去做这样一个项目。思考再三,以下原因也决定了我愿意去做一个让自己满意的 GitHub 第三方客户端。


  • 对于时常关注 GitHub Trending 列表的笔者来说,迫切需要一个更简单的方式随时随地去跟随 GitHub 最新的技术潮流;

  • 已有的一些 GitHub 小程序客户端颜值与功能并不能满足笔者的要求;

  • 听说 iOS 开发没人要了,掌握一门新的开发技能,又何尝不可?

  • 其实也没那么多原因,既然想做,那就去做,开心最重要。

1. Gitter



GitHub API v3:https://developer.github.com/v3/


目前实现的功能有:


  • 实时查看 Trending

  • 显示用户列表

  • 仓库和用户的搜索

  • 仓库:详情展示、README.md 展示、Star/Unstar、Fork、Contributors 展示、查看仓库文件内容

  • 开发者:Follow/Unfollow、显示用户的 followers/following

  • Issue:查看 issue 列表、新增 issue、新增 issue 评论

  • 分享仓库、开发者


Gitter 的初衷并不是想把网页端所有功能照搬到小程序上,因为那样的体验并不会很友好,比如说,笔者自己也不想在手机上阅读代码,那将会是一件很痛苦的事。


在保证用户体验的前提下,让用户用更简单的方式得到自己想要的,这是一件有趣的事。

2. 探索篇

技术选型

第一次觉得,在茫茫前端的世界里,自己是那么渺小。


当决定去做这个项目的时候,就开始了马不停蹄的技术选型,但摆在自己面前的选择是那么的多,也不得不感慨,前端的世界,真的很精彩。


  • 原生开发:基本上一开始就放弃了,开发体验很不友好;

  • WePY:之前用这个框架已经开发过一个小程序,诗词墨客,不得不说,坑是真多,用过的都知道;

  • mpvue:用 Vue 的方式去开发小程序,个人觉得文档并不是很齐全,加上近期维护比较少,可能是趋于稳定了?

  • Taro:用 React 的方式去开发小程序,Taro 团队的小伙伴维护真的很勤快,也很耐心的解答大家疑问,文档也比较齐全,开发体验也很棒,还可以一键生成多端运行的代码(暂没尝试)


货比三家,经过一段时间的尝试及踩坑,综合自己目前的能力,最终确定了 Gitter 的技术选型:


Taro + Taro UI + Redux + 云开发 Node.js

页面设计

其实,作为一名 Coder,曾经一直想找个 UI 设计师妹子做老婆的(肯定有和我一样想法的 Coder),多搭配啊。现在想想,code 不是生活的全部,现在的我一样很幸福。


话回正题,没有设计师老婆页面设计怎么办?毕竟笔者想要的是一款高颜值的 GitHub 小程序。


嗯,不慌,默默的拿出了笔者沉寂已久的 Photoshop 和 Sketch。不敢说自己的设计能力如何,Gitter 的设计至少是能让笔者自己心情愉悦的,倘若哪位设计爱好者想对 Gitter 的设计进行改良,欢迎欢迎,十二分的欢迎!

3. 开发篇

Talk is cheap. Show me the code.


作为一篇技术性文章,怎可能少得了代码。


在这里主要写写几个踩坑点,作为一个前端小白,相信各位读者均是笔者的前辈,还望多多指教!

Trending

进入开发阶段没多久,就遇到了第一个坑。GitHub 居然没有提供 Trending 列表的 API!!!


也没有过多的去想 GitHub 为什么不提供这个 API,只想着怎么去尽快填好这个坑。一开始尝试使用Scrapy写一个爬虫对网页端的 Trending 列表信息进行定时爬取及存储供小程序端使用,但最终还是放弃了这个做法,因为笔者并没有服务器与已经备案好的域名,小程序的云开发也只支持 Node.js 的部署。


开源的力量还是强大,最终找到了github-trending-api,稍作修改,成功部署到小程序云开发后台,在此,感谢原作者的努力。


  • Trending 列表云函数


// 云函数入口函数exports.main = async (event, context) => {  const { type, language, since } = event  let res = null;  let date = new Date()  const cacheKey = `repositories::${language || 'nolang'}::${since ||  'daily'}`;  const cacheData = await db.collection('repositories').where({    cacheKey: cacheKey  }).orderBy('cacheDate', 'desc').get()  if (cacheData.data.length !== 0 &&    ((date.getTime() - cacheData.data[0].cacheDate)  < 1800 * 1000)) {    res = JSON.parse(cacheData.data[0].content)  } else {    res = await fetchRepositories({ language, since });    await db.collection('repositories').add({      data: {        cacheDate: date.getTime(),        cacheKey: cacheKey,        content: JSON.stringify(res)      }    })  }  return {    data: res  }}
复制代码

Markdown 解析

嗯,这是一个大坑。


在做技术调研的时候,发现小程序端 Markdown 解析主要有以下方案:


  • wxParse:作者最后一次提交已是两年前了,经过自己的尝试,也确实发现已经不适合如 README.md 的解析

  • wemark:一款很优秀的微信小程序 Markdown 渲染库,但经过笔者尝试之后,发现对 README.md 的解析并不完美

  • towxml:目前发现是微信小程序最完美的 Markdown 渲染库,已经能近乎完美的对 README.md 进行解析并展示


在 Markdown 解析这一块,最终采用的也是 towxml,但发现在解析性能这一块,目前并不是很优秀,对一些比较大的数据解析也超出了小程序所能承受的范围,还好贴心的作者(sbfkcel)提供了服务端的支持,在此感谢作者的努力!


  • Markdown 解析云函数


const Towxml = require('towxml');const towxml = new Towxml();// 云函数入口函数exports.main = async (event, context) => {  const { func, type, content } = event  let res  if (func === 'parse') {    if (type === 'markdown') {      res = await towxml.toJson(content || '', 'markdown');    } else {      res = await towxml.toJson(content || '', 'html');    }  }  return {    data: res  }}
复制代码


  • markdown.js 组件


// 云函数解析markdownparseReadme() {  const { md, base } = this.props  let that = this  wx.cloud.callFunction({    // 要调用的云函数名称    name: 'parse',    // 传递给云函数的event参数    data: {      func: 'parse',      type: 'markdown',      content: md,    }  }).then(res => {    let data = res.result.data    if (base && base.length > 0) {      data = render.initData(data, {base: base, app: this.$scope})    }    that.setState({      fail: false,      data: data    })  }).catch(err => {    console.log('cloud', err)    that.setState({      fail: true    })  })}
复制代码


// Markdown渲染render() {  const { data } = this.state  return (    <View>    {      data ? (        <View>          <import src='../towxml/entry.wxml' />          <template is='entry' data='{{...data}}' />        </View>      ) : (        <View className='loading'>          <AtActivityIndicator size={20} color='#2d8cf0' content='loading...' />        </View>      )    }    </View>  )}
复制代码

Redux

其实,笔者在该项目中,对 Redux 的使用并不多。一开始,笔者觉得所有的接口请求都应该通过 Redux 操作,后面才发现,并不是所有的操作都必须使用 Redux,最后,在本项目中,只有获取个人信息的时候使用了 Redux。


// 获取个人信息export const getUserInfo = createApiAction(USERINFO, (params) => api.get('/user', params))
复制代码


// actionexport function createApiAction(actionType, func = () => {}) {  return (    params = {},    callback = { success: () => {}, failed: () => {} },    customActionType = actionType,  ) => async (dispatch) => {    try {      dispatch({ type: `${customActionType  }_request`, params });      const data = await func(params);      dispatch({ type: customActionType, params, payload: data });
callback.success && callback.success({ payload: data }) return data } catch (e) { dispatch({ type: `${customActionType }_failure`, params, payload: e })
callback.failed && callback.failed({ payload: e }) } }}
复制代码


getUserInfo() {  if (hasLogin()) {    userAction.getUserInfo().then(()=>{      Taro.hideLoading()      Taro.stopPullDownRefresh()    })  } else {    Taro.hideLoading()    Taro.stopPullDownRefresh()  }}const mapStateToProps = (state, ownProps) => {  return {    userInfo: state.user.userInfo  }}export default connect(mapStateToProps)(Index)
复制代码


// reducersexport default function user (state = INITIAL_STATE, action) {  switch (action.type) {    case USERINFO:      return {        ...state,        userInfo: action.payload.data      }    default:      return state  }}
复制代码


目前,笔者对 Redux 还是处于一知半解的状态,嗯,学习的路还很长。


有需要的同学可以前往开源仓库查看相应的完整源码,还请多多指教。

4. 结语篇

当 Gitter 第一个版本通过审核的时候,心情是很激动的,就像自己的孩子一样,看着他一点一点的长大,笔者也很享受这样一个项目从无到有的过程,在此,对那些帮助过笔者的人一并表示感谢。


当然,目前功能和体验上可能有些不大完善,也希望大家能提供一些宝贵的意见,Gitter 走向完美的路上希望有你!


最后,希望 Gitter 小程序能对你有所帮助!


更多内容,请关注前端之巅。



2019-02-25 08:159556

评论 3 条评论

发布
用户头像
mark
2019-03-17 09:35
回复
用户头像
体验了一下,真的不怎么好,如果用原生开发会比较不错,taro这个坑再也不会迈进了,国内的开源项目真的是慎入坑,怀念linux、spring...这些开源项目的时代
2019-02-27 14:56
回复
你好,能讲解一下,具体哪方便体验不好么,正在选型,考虑用什么框架
2019-03-27 11:48
回复
没有更多了
发现更多内容

5G为数字化转型插上翅膀

CECBC

5G网络安全

如何预防工业物联网中的恶意攻击?

VoltDB

大数据 数据分析 5G 工业互联网

可以解除程序员中年危机的职业规划

Java架构师迁哥

深度解析ThreadLocal原理

AI乔治

Java 架构 线程 ThreadLocal

甲方日常 48

句子

工作 随笔杂谈 日常

当人脸识别对准执法者,AI的应用边界博弈

脑极体

Rethink:多版本文件的命名细节

小匚

团队 随笔杂谈

微信视频号强制置顶朋友圈:盈利不可牺牲用户体验

石头IT视角

低代码开发平台核心功能设计——组件自定义交互实现

徐小夕

大前端 编辑器 H5 大屏可视化 lowcode

涨薪神作!华为内部操作系统与网络协议笔记爆火,Java程序员有福了

Java架构之路

Java 程序员 面试 编程语言

数字人民币都来了 黄金还有什么用?

CECBC

数字货币

2020双11:每秒58.3万笔!阿里云又扛住了!

云计算 互联网 运维 云原生 科技

当我们在讨论实时性的时候,我们在讨论什么?

VoltDB

数据分析 5G 工业互联网

这份笔记我必啃完!美团T9首发内部JVM高级特性笔记,差距不止一点点

Java架构追梦

Java 源码 架构 面试 JVM

O'Reilly出版社又一经典之作——Python设计模式

计算机与AI

Python

从零到千万用户,我是如何一步步优化MySQL数据库的?

冰河

数据库 架构 性能优化 分布式数据库 分布式存储

靠脑机接口“隔空探物”,大脑植入芯片可实现“心灵感应”

脑极体

Reactor中的Thread和Scheduler

程序那些事

响应式编程 reactor 多线程 程序那些事 reactivex

实时指挥调度的发展和优势

anyRTC开发者

ios android 音视频 WebRTC RTC

如何应对大促流量洪峰?揭秘京东技术人的备战手册

京东科技开发者

云计算 大数据 亿级流量

区块链产业,怎样“链”住未来?

CECBC

区块链

「Java并发编程」从源码分析几道必问线程池的面试题?

Java架构师迁哥

代码简易调试方法.md

Albert

Java LeetCode 调试

cglib入门后篇

Rayjun

Java cglib

架构师训练营第 1 期第 8 周学习总结

好吃不贵

极客大学架构师训练营

一个技术总监的忠告:精通那么多技术,你为何还是受不到重用?

四猿外

程序人生 技术管理 加薪 职场成长 源码阅读

【T1543.003】利用 ACL 隐藏恶意 Windows 服务

比伯

Java 大数据 编程 架构 计算机

记不住Spring中Scheduled中的Cron语法?让我们看看源码吧

AI乔治

Java spring 编程 架构

甲方日常 47

句子

工作 随笔杂谈 日常

Spring bean 加载顺序导致的 bug 问题

AI乔治

Java 架构 Spring Boot

什么?美团T9首发内部JVM高级特性笔记,看完差距不止一点

小Q

Java 学习 程序员 架构 面试

Gitter:高颜值GitHub小程序客户端诞生记_大前端_huangjianke_InfoQ精选文章