DEV Community

Cover image for How I made Xper - A RealTime Code Deployer and Code Editor

How I made Xper - A RealTime Code Deployer and Code Editor

Jaagrav on November 04, 2020

In the world of Web Development, I have always faced one major/irritating problem which is responsiveness of a website. Everytime when I am develop...
Collapse
 
amplanetwork profile image
Ampla Network

Ok, good post thanks.
Just to know, how it is different to using any other editor ? If the project use a live / hot reload it will be the same... react has, angular has it too, vuejs also... so why being contained to an acejs embeded project ? Developers have already their habits. Just saying.

Collapse
 
jaagrav profile image
Jaagrav

I am saying Hot Reload on multiple devices not just on my PC while I am coding, hot reload the code on my laptop, mobile, tablet, tv, wherever I want to check my code's output, updates in realtime.

Collapse
 
amplanetwork profile image
Ampla Network • Edited

Yep, as in React Native. My point is Live reload is a feature that should come from what is serving files, not the editor itself. It is just driven by websocket events (Hope not polling requests lol)

You should have wrote more in your post to explain the gain with this feature. When reading we have the feeling that it could be very cool, but lots of devs will not give it a try if it implies not to have the possibility to easily separate the deployer from the editor.

But don't misunderstand me, it is a very good job.

Thread Thread
 
jaagrav profile image
Jaagrav

Oh I get you, that's true, I am actually working on something similar for the next version of Xper. But the thing is doing this live for a file system, especially with React Native, I think would be tough not impossible but tough because it needs to build an app for multiple device and update it. Think about having like 100 files/folders for professional projects, that's when people would start facing problems because it's gonna take more time to refresh and build for every individual device that has it open.

Thread Thread
 
amplanetwork profile image
Ampla Network • Edited

I think would be tough not impossible but tough because it needs to build an app for multiple device and update it

React native was just an example, the point is at a low level, when you watch files / folders the OS will raise changes on an event base approach, that's why a watcher in webpack / or typescript can monitor a change in a node_module folder very quickly, it does not really depend on the amount of file (It is, but hundred is not a big deal at all).

You have to broadcast changes so even with 100 devices the result is not less accurate.
I did the same for online gaming system with deployment on about 5000 test targets.

The second point is that you keep Firebase as a choice, but to be usable you need to think with a more abstract level view, with a data-provider approach to allow docker feature, local dev feature or internal use in company that do not want to share outside the code. Your tool is named Xper after all.

You got something interesting, don't hide the potential.

Thread Thread
 
jaagrav profile image
Jaagrav

I see what you're saying, we should be able to do whatever we do while coding on our computer locally but on the web, for that we would be needing an amazing backend which can handle a huge amount of files and also be able to install packages. My idea is not this robust, it's about multiple files and that's where it ends but that's not real coding right? It's going to be only for beginners like Xper is. Being able to install packages, use the command line and still saving everything on cloud is what we want to build, what we can refer to as extreme programming, well that's got a huge potential but at the same time it's going to be very robust project to work on.

Collapse
 
schoon profile image
Dan Schoonmaker

This looks really cool, awesome work!

I'm reading on my phone, so it's hard for me to tell, does Ace.js allow you to transpile more complex Javascript using something like Babel? Or is this just for basic Javascript/HTML/CSS?

Collapse
 
jaagrav profile image
Jaagrav

Not really, I had to make changes to AceJS' code in order to have some features/text highlighting which were not predefined even while writing code in VanillaJS and that I know sucks but I think AceJS is the best to create something for beginners... I am working on a Code Editor rn... I have to make a lot of changes to the library in order to make it feel better and smoother. Check out Snipp.in, write some code, you'll understand what I am really talking about... Visit on Desktop though, also it's not something that I made, Haxzie made it.

Collapse
 
matthew_collison profile image
Matthew Collison

I am incredibly impressed. The remote editing capabilities are possibly the most impressive part, but it's actually all designed, laid out and coded really nicely too.

Amazing work - and you're only 17. Madness

Collapse
 
jaagrav profile image
Jaagrav

Thank you so much :)

Collapse
 
hi_artem profile image
Artem

Looks good.
Not clear what you mean by "deploy code" though.

Collapse
 
jaagrav profile image
Jaagrav

By deploying code, I mean you can view your code output in realtime on various devices... Any questions? XD