✈ How I Developed a Site On The Go with Pylon+Tin?
Tags: webdev, javascript, cloud, productivity
Published: 2022-03-16 09:57:36

I wasn't really a fan of cloud development until I was forced to experience with it ... and it wasn't that bad after all. In fact, it ends up a rather nice experience.

I have been working for the China site development project for [The Gospel Coalition](https://www.thegospelcoalition.org/) recently. Now that you know I didn't like cloud developing initially, the story starts with headaches: 🤒

Just two days before the project should be up, I was called to Beijing for emergency outstation work. Travelling between places could've spent more than ten hours and my new MacBook has nothing installed. I was overwhelmed. How am I supposed to get all this work done? Are all these time on the train wasted? I could've done developing and debugging within that ten hours.

To be clear of what I'm doing, these are my project overalls:

## Project Background
The project I'm working for The Gospel Coalition is an independent site development project outsourced to a Chinese team. The whole working team is rather globalized, and the site development project is done through collaborations around the world.

## Project Structure
Compared to the complicated project background, the project structure is rather simple. It consists of three independent services:
* WordPress: Enabled for the editors as a backstage for content management, allowing them to post their articles and access to other contents
* Databases: A MySQL database. Both services will be accessing the same database, with WordPress writing in it while the official site reads
* Independent Official Site: Displaying content. We're not using WordPress templates as there are a lot of customizations. The site is independently developed with Java (Spring Boot + Thymeleaf)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zmjkh1yp11y6hjqdy9rv.png)

## Original Developing Plan and Strategy
Since we're communicating through email, the procedure of applying for a test server would take too much time. Hence, I've started developing the project after applying for the access to the test data. Now that my part has done and it's now in the process of joint debugging and acceptance inspection, I'll need to:
* Apply for a test server
* Configure the test server environment
* Install Jenkins and configure its deployment information
* Deploying the local project and email the PM for acceptance inspection
* Make changes according to the feedback and ... LOOP the previous process.

## Some First Try on Cloud Development ☁
Everything would be in time if there wasn't an outstation task. Sitting in a KFC 40 minutes before the train departs, I was puzzled by a series of problems: **I couldn't code right now because I'll need to download a lot of programs for the new MacBook, configuring the developing environment etc., and most importantly - how fast can we expect for the internet speed out there? I don't even have that much time to wait!**

Cloud native and distance collaborative development came up in my mind. Just as what I've said, I didn't really want to change my old working style despite cloud development being the future trend, and a simple understanding of it was all for me. I first heard TeamCode's product in a gathering weeks ago. Since there's no better idea at that time, I decided to give it a try on the way to Beijing. How bad could that be?

I'm going to explain what I've done with it and how it eventually helps me to get all my troublesome tasks done just in time:

I turned on my MacBook, connected to my hotspot. And there goes the old process, I googled [TeamCode](www.teamcode.com), create an account and log into it. Now that you have me, you can just click the link to have a look ... or perhaps if you prefer google :D

What surprised me was that deployment process: After authorizing my Git repository into Pylon, the Java development environment was created within 5 seconds!

The configuration I chose was the default 2 vCPU with 4G RAM, more or less a virtual Linux machine. Then, I pulled down the codes.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dtyzzau5tjcxf4gxs1gb.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7nzjsefpoul5wtkf5k79.png)

Perhaps Pylon detected that I was working on my project with Java, so Git and Maven were installed by default. It supports both VSCode and a built-in Cloud-IDE. Since all the basic services and styles were done developing, there is only a few tweaks and debugging left. I skipped for downloading another IDE and worked directly on its Cloud-IDE.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5w6y7gkyfccoge8eo9r.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1j5j2jvvd95lhrcgpy71.png)

I started worrying again when I found out that I'll need to structure mvn install before starting everything. According to my previous experience, downloading all these dependencies may need more than 20 minutes and my hotspot might not be able to sustain it. Until then, I realized ... Hey, wasn't this a remote machine? It should be based on the server's internet and algorithm power, I shouldn't be worrying about it. After the dependencies' downloads have started, I packed my MacBook and start boarding the train. Although it was set up as expected when I got onto my seat, it is still exciting to see everything was ready to go. 

Now that my debugging was done after 2 hours of hard work on the bullet train, another problem puzzled me: How should I send the project to the PM for inspection, without applying for a server and let alone deploying Jenkins?

Puzzling around for an optimum solution, I really appreciate that the [TeamCode's Docs](https://www.teamcode.com/docs/en-US/teamcode/teamcode-overview) were undoubtably helpful! I tried on Tin - another cloud solution provided by TeamCode - to launch the application and my puzzling for purchasing a test server and deployment task were solved in the blink of an eye.

Tin is basically a product that packs application, so it really helps as the PM is only interested in the results and not the codes. I uploaded my codes to Git repository again and created a Tin for the PM.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gzpq5i8z6ldd0yf5zjnd.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uf71kg4w1c4i5vnf36hb.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jnm0he5mx5jbfdwk7x6e.png)

After I've done a quick check on Tin, I've sent an invitation link to join my workspace. The project can now be accessed by clicking on the endpoint on Tin. It can even be upgraded for rapid deployment if there are any changes. After emailing to the PM, I have even some time left before arriving in Beijing.

## Some Interlude
Everything goes smoothly for the first night: The PM is able to inspect the project through Tin. He did propose a few issues and they are all resolved with Cloud-IDE + Pylon. After a few emails back and forth, the inspections are basically done.

After another long day of work, we encountered another bug while I was on the metro, travelling back to Shanghai. One of the JS methods in a page conflicted with the overall method and the page could not be opened! It's just an hour before the official release and there's no way for me to code on the metro. I'm in a dead guilt if the whole project has to be delayed and everyone needs to work over-time just because of me. 

In this great desperate situation, I tried to ask if the front end programmers could help. I sent an invitation link to him and "forced" him to join my workspace to help modify the codes. He finally agreed to help after acknowledging that there was no need for environmental deployment, structuring and all those troublesome tasks - and a big meal treat from me. We communicated over the phone by instructing him how to use Pylon and Cloud-IDE.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q6gpgavrlmc01lk10ix0.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q4h1tsqs67ihhoy2casv.png)

Thanks to his quick turnaround, everything was done in 10 minutes. The application was updated on Tin, the PM inspected it, and ... Phew, the site was smoothly launched on time.

## 📒 Notes
These incidents really gave me a first hand experience on cloud collaboration on the go. I really appreciate that everything was done on time and there is no need to work over the weekends. This opportunity really changed me by having a nice experience of developing and inspection with the fragmented time.

From my experience, I guess that cloud developing with TeamCode would help in these situations:
1. A Flexible Development Situation. Cloud-IDE + Pylon would be helpful if you're changing between computers and working environments. Since the resources are all on the cloud and there is no need for environmental deployment, cloud developing can be rather flexible.
2. Pack and Deploy Rapidly. Tin would be helpful for situations such as inspections, demo presentations, technical communications, rapid POC etc. It enables us to display our project to the others conveniently.
3. Team Collaboration. For example, your teammates can debug on the project directly and there are no worries about time and geographical difference. Everyone could make use of the service according to their own tempo on TeamCode as most of the services are automated.

Thank you for reading my article and hope my experience will be helpful to you. Feel free to comment below for discussions!