GSoC 2017 Summary: Zulip Electron
GitHub | Email | Facebook | View ProjectZhongyi Tong |
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.
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.
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)
3. Code Refactoring
The following refactoring is done.
- 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
ServerManagerViewis composed of
WebViews. They use props and callbacks to communicate back and forth. Furthermore,
Tabinherits two types of tabs,
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.
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.
- #120 Fix error launching caused by missing keyword. #121 on Mar 6
- #104 Add a menu item to toggle the tray icon. #122 on Mar 6
- #1 Add nice support for multiple Zulip servers #140 on May 22
- Fix WebView resize problem #162 on Jun 1
- Issue/network disconnectivity resolution #165 on Jun 4
- Refinements on multi tab view #168 on Jun 16
- Set user-agent from a singleton util. #174 on Jun 12
- Refinements on the main process #180 on Jun 19
- Improve network error display. #184 on Jun 21
- Fix close settings causing split webviews (#188). #189 on Jun 28
- Feature/settings page #190 on Jul 2
- Make ConfigUtil runnable in both processes. #193 on Jul 5
- Fix defaultValue not set on the first time. #194 on Jul 5
- Change config filename to avoid conflict. #195 on Jul 5
- Reload db after update. #196 on Jul 5
- Add the ability to open Settings with specific view #200 on Jul 9
- Save server icon && Provide keyboard shortcut to switch between servers. #202 on Jul 11
- Provide silent & seamless reload for the app #218 on Jul 18
- Issue/tab style #219 on Jul 26
- Hide/Toggle left sidebar #230 on Jul 26
- Add 'Hard Reload' mode for debugging. #235 on Jul 27
- Issue/fetch server details from zulip api #236 on Jul 31
- Set show-sidebar to true by default. #240 on Aug 1
- Add an os check for webview focus events. #241 on Aug 1
- Capitalize menu items. #254 on Aug 2
- Delay webview fade-in. #256 on Aug 2
- Click server name in settings to show webview. #262 on Aug 3
- Feature/switch servers in menu #265 on Aug 6
- Enhance error handling. #267 on Aug 8
- Issue/refine add server #270 on Aug 10
- Issue/new server icon cache #273 on Aug 16
- Load all servers on app start-up. #274 on Aug 18
- Feature/connect through proxy #278 on Aug 21