On 31st August 2020, the 3rd and final phase of Google Summer of Code will end. I had a really good time working with nteract this summer, and it turned out to be a unique experience. This blog is my final report on the project, and I will talk about the implementation, the source etc.
Title: Reproducible computing with nteract play
Abstract: This project aims to support reproducible computing using nteract and Binder—the ability to start an interactive session via a unique URL, with content provided by any version control system and executed in a remote environment. To begin with, Github API can be used to fetch and save content, but the scope of the project can be adjusted to deal with different VCS. The Github repo can be launched on a binder instance, and the code samples can run on it.
In my proposal, I divided my work into 3 phases. However, when I started working on the application, I began with UI/UX Integration.
- Github Integration
- MyBinder Integration
- UI/UX Integration
Before starting to write code, I created the moke ups of the application in Figma and shared it with Safia. I also made a logical flow for the Github Integration. Initially, I also spent some time in sharping my React and other skills.
One can say it was a slow start, but I believe in “Think twice and code once”. So when I started working, things were moving fast.
I started by developing a component inventory in React from the mockups and tested it in a storybook in
UI-webrepository. Right after creating new components, I integrated them with the
Along with this, I was also testing Github integration features like fetching content, folders etc. and was adding them to the application. I completed the OAuth server and launched it via vercel and successfully implemented the Github OAuth.
I also added a Landing page and Authentication page to the application.
- I had half time this month due to exams, but because I made extra efforts(Worked on the weekends) in the first month, I was able to catch up. I added the file explorer component to the application. I completed the last part of Github integration, which was saving back the changes.
- I added Notification and Notebook component, which marks the completion of UI/UX integration. I did the code cleaning and formatting, added documentation and comments. I fixed the routing issues and some other minor issues. I also added console logs. Launched and connected to the MyBinder server.
You can read more about my journey and implementation in the following blogs.
- The open-source summer of 2020
- Enabling Reproducible computing in nteract play
- What’s it like to strategize and build the sails for nteract-play
Progress Report 1
- 1st Evaluation of nteract-play
- 2nd Evaluation of nteract-play
- Demystifying nteract SDK
- GSoC 2020: Final report of nteract play
The source code of the work I did this summer can be found in the following repositories.
Further, you can look into the raised PRs to see the detailed implementation of the work.
PRs Before coding period
PRs During coding period
- [nteract/web] New layout and OAuth in @nteract/web
- [nteract/web] Save/upload to Github and other improvements
- [nteract/web] Add project details in main and landing page
- [nteract/web] Add language detection for editor and move functions out of main file
- [nteract/web] Replace routes with query
- [nteract/web] Clean Code | Fix Formatting
- [nteract/web] Add notebook component and wrap up for beta and GSoC
not merged yet
I have talked about how the implementation of the project and the journey. Now let’s talk about the final shape of the project. Below is the working of the application.
Just like any application or product, there will always be more that can be done with nteract play. One of the most ambitious possibility is to integrate nteract play/web with nteract desktop, which will make it super easy to have an interactive environment connected with a remote server.
Some of the more practical things that can be done shortly are given below.
- Upload OAuth server from the official account.
- Update OAuth application in GitHub to point to nteract play, instead of localhost.
- FileExplorer gets reset, fix that by storing the state to redux.
- Handle “Github update too soon” error, which happens when we try to save changes again within ~2 minutes of saving.
- We can use iterm.js or similar library to add terminal support in the console.
- Click to copy sharable link button.
- Add star repo button.
- Add option to strip output from the notebook.
- Add state verification code to Github OAuth.
- Add a loading experience.
- Replace local component store with the redux store.
I want to thank my mentor Safia(@captionsafia). It was a pleasure working with her. I got to learn a lot from her in the past three months. She helped me throughout the coding period, and that kept things on track. Her feedbacks in each evaluation were very constructive, and I will always use them as an anchor in my developer journey.
I also want to thank the awesome nteract community for the platform and all the projects in it. Open source is thriving because of organisations like this.
I am thankful to google for creating and continuing an internship program like GSoC. I feel such programs can boost the skills of those students about to enter the industry and get familiar with FOSS culture early.
In the end, I want to thank all the open-source libraries I used in making this application. I respect and appreciate all the hard work people have done to make the source code of so many excellent libraries for others to use.
nteract is an incredible ecosystem and community to be a part. I am glad I picked it as my organization under GSoC. I also feel great that I got to work on the nteract play project and push it towards the finish line. We will be releasing it as a public beta soon. I can't wait to see it online and use it for my projects, and hopefully, many people will find it useful too.
Author Raman Tehlan
License CC BY-NC-ND 4.0