Skip to content

Instantly share code, notes, and snippets.

@geeeeeeeeek

geeeeeeeeek/GSoC@Zulip.md

Last active August 30, 2017 19:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save geeeeeeeeek/7aee91a648c26b4dd10094322c7f6265 to your computer and use it in GitHub Desktop.
Save geeeeeeeeek/7aee91a648c26b4dd10094322c7f6265 to your computer and use it in GitHub Desktop.
Download ZIP
GSoC 2017 Work Summary
Raw
GSoC@Zulip.md

GSoC 2017 Summary: Zulip Electron

Zhongyi Tong | GitHub | Email | Facebook | View Project

I. Overview

Over the summer, I worked on the development of Zulip's desktop app (contribution graph). I started with the multi-team viewer in March, while refactoring the current architecture. In the summer, after some iterations over the deisgn, I mainly focused on the refinements of the viewer and the Settings page. The sections below describe the highlights of my work.

II. Highlights

1. Tab-based Viewer for Multiple Teams

To implement the multi-team feature, the existed code was restructured and rewritten. In the past, the main view was responsible for loading the team and interactions with the user. Now, it's designed to load the sidebar and a container for webviews, each of which loads a team. With the Viewer:

  • Users can sign into multiple teams at the same time. (#140)
  • Settings/About/Network Troubleshooting pages and individual servers are displayed as tabs. (#190)
  • Once users start the app, they will receive notifications from all teams. (#274)
  • They can use shortcuts or mouse clicks to switch from teams. (#202)

There are also continuous user experience enhancements after the skeleton was finished. For example, the redesign of tab style (#219), the cache of server icon (#202), silent & seamless refresh (#218), etc.

screen shot 2017-08-21 at 10 48 40 am

2. App Preferences

Designed app's Settings page from sketch and redesigned the process to add a server. Up to now, there are three sections, including General, Network and Servers. Users are able to:

  • Toggle the tray icon (#122) and the sidebar (#230).
  • Manage desktop notification and beta updates (contributed by Akash).
  • Connect to servers through a proxy (#278).
  • Add a new server or remove an existed server. (#190)

screen shot 2017-08-21 at 7 47 29 pm screen shot 2017-08-21 at 7 50 04 pm screen shot 2017-08-21 at 7 50 07 pm

3. Code Refactoring

The following refactoring is done.

  • Apply ES6 grammar to all Javascript files.
  • Use component-based inheritance and composition for every view in the app. Actually, the style I use is pretty much like what React does. For instance, the ServerManagerView is composed of Tabs and WebViews. They use props and callbacks to communicate back and forth. Furthermore, Tab inherits two types of tabs, ServerTab and FunctionalTab. As the scale of the project goes up, the fine-grained modularity makes it easier to make changes.
  • Arrange files according to usage, i.e. components, pages and utils. Extract shared aspects from different modules as a utility, like domain-util, which manages the addition, checking, deleting and listing of servers, and system-util, which does the OS checking, user-agent generation, etc.

4. Network Troubleshooting

Show Network Troubleshooting tab when the Internet is disconnected. It automatically detects wifi reconnection and then reloads the app.

screen shot 2017-08-21 at 10 05 39 pm

III. Contributions

Merged PRs

Reported Issues

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment