It’s not often for anyone to get a chance to announce a project coming to fruition. Well today is that day for me. I’ve been working on JitHub on and off for about a year and half now. It went from an idea that I just wanted to experiment with to a full-blown app that I can self-host. It took many late nights, personal time, and collaboration to be where JitHub is today. It’s not a mature project by any means, and I still have tons, and I say tons, of ideas that I want to implement. Its future is still ahead of us, but, today, let me take you on a journey of how it came to be.

The Idea

I’ve always liked using GitHub. It’s where all my code live, and it’s the place where software development happens. However, the GitHub website has never felt like a modern web app, and there’s no native first party GitHub app on Windows. Why don’t I build one, I thought to myself. At the time, I didn’t have much experience with UWP development, but I was already a big fan of it for its sand box nature, dynamic and fluid UI, a welcoming developer ecosystem and so much more. So here starts the project known as JitHub.

The Start

The start was not easy. The repository’s first commit was in August 2020, but I actually have started the experiment of JitHub back in 2019. I didn’t know where to start, so I went on GitHub (like this is why I love GitHub) and started to look for open-source projects to get some inspiration. And I sure did. I found CodeHub, a UWP GitHub app that’s open source, and it has a lot of features too! So, I started reading it’s code like bible, and soon enough, I started to see the challenges.

The challenges

First, GitHub has really good API documentation and SDK in many languages. As a .NET developer, I can use their Octokit.net library and have access to GitHub API in a .NET friendly way, but there are always challenges when developing software at this scale.

Authentication

Like many identity service provider, GitHub doesn’t allow authentication with just username and password. The one and only “best practice” is to use Web Authentication. As the developer, I have to redirect the user to GitHub’s login page on the web, and if and when the user login successfully, I get a code for which I can request an authentication token with. This doesn’t sound so hard, but there are a few ways to do it. The first way is to use the WebAuthentication service built into UWP, but that turned out to be a dead end because it’s still powered by IE, which GitHub authentication doesn’t support any more. Another way is to build a web authentication service myself, which is what CodeHub did. It works, but the UI is not elegant. Furthermore, the users don’t get to use their password manager that’s normally built into the default browser. This is why JitHub use the browser + protocol redirect to authenticate our users. You don’t need to manually enter username and password if you already have logged in with your browser, and you don’t need to enter anything into a third-party app to potentially compromise your credentials (not that JitHub is an insecure app, but you get the ease of mind).

Syntax Highlighting

A big part of GitHub is browsing code. While GitHub has really good syntax highlighting, it’s not something available to third party apps. JitHub’s design philosophy is to give the users the feeling of a code editor like experience when it comes to code viewing. That’s why I have a lazy loading enabled file tree on the left side of the code viewer page, but syntax highlighting remains an issue I needed to solve. Initially I looked into how CodeHub does it, and it was really interesting. It uploads the code to a syntax highlighting web service which returns HTML and CSS that gets rendered to a WebView. The HTML and CSS provide the necessary style for the syntax highlighting, and for the most part, it looks alright. I was tempted to use this method as well at the beginning, but I quickly noticed a few drawbacks of this approach. First, it uploads one’s code no matter if it’s private repo or not. This could be a huge security problem for high profile repos. Secondly, it doesn’t work offline, which I plan to support in JitHub in a future build. So, this method is definitely not sustainable. I needed something better, something that’s more native and local. I then started to look at what code editor control is available on UWP, but it turns out there’s basically no code editor control available for UWP. (There’s Monaco for UWP, but it’s WebView and so buggy for JitHub’s use case) So for initial versions of JitHub, we are only supporting code viewing, and the syntax highlighting is supported by a markdown code block. In JitHub V2, we’ll explore some crazy ideas around this area that will bring the code viewing/editing experience 10x better than the current one.

Markdown Format

GitHub uses markdown in a lot of places. We can find them in various readmes, issue/pull request comments and more, and the worst part it, GitHub uses their own flavor of markdown specification known as GFM (GitHub Flavored Markdown). For JitHub to display all the things correctly, I needed a way to render GFM instead of the universal markdown format. This was hard because, normally for UWPs, we use the markdown control from the community toolkit, but to support GFM, I would need to add custom parsers for the additional formats. While that’s definitely something I should do to provide a native experience for the users, I simply don’t have the time if I were to shoot for launching JitHub V1 with Launch 2021. So for now, I use a great markdown parser called markdig to render the markdown text to a GFM supported HTML/CSS document and render them in a WebView. This is not ideal, and it’s certainly one of the areas I want to do a quick follow post launch.

Design

After solving the initial challenges, I started rapid development as all there’s left is to transform my thoughts into code. However, I didn’t want to do what CodeHub did which is to make the UI layout completely from scratch. While it’s a good app with many features, I felt lost using it as a GitHub user, so I thought to myself, I need to make JitHub familiar to GitHub users on the web. So I started to note down all the features and layouts that GitHub web uses and translate them into what would look and feel more like a native UWP app but still maintaining the GitHub DNA. You will notice, when using JitHub, everything feels familiar for both Windows users ang GitHub users. JitHub uses the latest Fluent Design powered by WinUI 2.6, and the UI just flows like water when navigating through different parts of the app.

Logo

Every app needs a logo, but it’s just not something I know how to do. I could just slap a letter “J” to a transparent PNG and call it a day, but that would mean instance failure for JitHub. The logo is the first thing the users see no matter it’s for acquisition or day to day use, and it’s among the most important elements that provide an identity to the app. A lot of apps don’t get any attraction because the developer got lazy on the logo. So JitHub needs a great logo. Introducing our logo designer: Keira Xu

Our design philosophy for the logo is the same as that of the app. We want it to be familiar for both GitHub users and Windows users. So, it has design elements from both products. The JitHub octopus represents the professional feature set with fast and fluid UI, and we got our inspiration for the color scheme from GitHub Desktop’s logo. The JitHub logo also follows Fluent Design principles, making it feels like home on Windows.

Here’s some early design concept for our logo.

App UI Design

Another big part of the design story is the UI itself. I spent most of the development time designing the UI myself as I code along, and the result was … bad. I had very inconsistent UI design that doesn’t look like a Windows app, and there’s just so many details that are wrong from font size, color scheme, inconsistent corner radius and so much more. Lucky for me, a UI designer who also loves the product reached out to me, and JitHub was saved! Introducing out UI designer: Jakub Bugajski

Jakub’s design has helped JitHub to be consistent, beautiful and align with both Windows and GitHub’s design principle. His passion in JitHub has also translated to many bugs reported and fixed. JitHub would not have been the state it’s in right now without his talent and dedication.

Here’s some early design concept of JitHub’s app UI.

Feature Set

Now let’s talk about the actual feature set of JitHub. The purpose of JitHub is to have close to 100% of GitHub website’s feature in a native UWP on Windows. It should represent the best GitHub development tool for Windows users. Although we are nowhere near 100% of the features on the website, we have plans to grow into our goal with even more custom features that GitHub’s website doesn’t have. But currently, we provide a decent set of features for anyone who wants to browser code, manage issues, and pull requests, view commits and stay up to date on the activity feed.

But didn’t I mention that we have custom features that even GitHub’s website doesn’t have? Introducing JitHub Pro!

Pro Features

While JitHub shoots to provide all GitHub’s features for free, we also provide a set of pro features that greatly improves your GitHub related productivity. For a fixed price of 9.99 USD, you can get JitHub Pro. With it, we have features like tab management in the top level so you can open multiple repos. Tab management in the code viewer so you can switch between different code files without losing context. We also have repo bulk delete, so you don’t have to go into each of your dead projects and type out the name just to delete them. And there are many more (and exciting) pro features to come! And the best part is, JitHub Pro is complete free for today only (September 1^st, 2021) in celebration of Launch 2021!

Shameless plugs~

And that’s a wrap on the first introduction of JitHub! Please go download it today if you are interested. A huge shout out to the UWP community and all the mods (especially Arlo) for hosting this event. Thanks to the annual Launch event, apps like JitHub can have a platform to show to the world what we have to offer. Also, a huge shout out to Uno Platform for sponsoring this event. Launch 2021 wouldn’t be this big and exciting without your contribution! Please feel free to follow me on twitter for more updates on JitHub’s development. Also please check out our designers’ profile pages to follow their latest work. JitHub wouldn’t be here without the massive help from Keira and Jakub.