Joel V Guízar

@joelguizar

RomeJS just launched, and it feels like Christmas!

May 17th 2017

You’re up against a timeline. It’s you vs. the world (or your boss). You have one mission, which must be completed in order to save your loved ones from a grim fate. The challenge? A thousand React apps. What do you do? Now, before you console log “mommy, help.” —

Imagine the same thing, but with all these features in your corner.

Looks like RomeJS would be the action sequel we’d actually want to watch.

A little more comprehensible now isn’t it?

How is this all possible you (didn’t) ask?

We all heard of React — it’s fast, it’s efficient, it’s one-way data flow makes you feel like you’re bathing in the rivers of O’ahu. Oh yes, that one way binding is indeed refreshing — at least for the client.

In the pursuit of happiness for the client, developers buried intuition, convenience, and efficiency — all which put a burden on the developer’s workflow. Our products are efficient — they’re fast. But, why, from a developmental standpoint, can’t we be equally the same?

Actual depiction of coding in React. Yes, that’s your component rendering.

Enter RomeJS.

A visualized IDE made to make the developmental side as intuitive, fluid, and performant as the work we put in for the client side.

So, how do we do this you might ask? First, we had to think of developers as people, and the rest was easy. Using a recursive parsing algorithm, RomeJS generates an Abstract Syntax Tree representation (or AST) of your code, and then shapes the nodes of the tree to retrieve the proper data, or inject the proper code — contingent on the feature.

Pictured: React Router Route & Link Attributes Activated on the RomeJS Component Hierarchy Tree.

After we parsed this AST into existence we then extracted all the necessary elements, including links, routes, and components. In addition because D3 is a jQuery-like library, we came up with a strategy to select nodes on React’s virtual DOM. And, because JSX is not an officially recognized syntax, we updated the parser library to make it compatible with React. Who doesn’t love their parses updated? If there are three certainties, it’s that there is Death, there are taxes and humanity loves their parsers updated!

The File Editor

With one view, you will be to edit your code, with another, you‘ll completely envision the structure of your application through a component hierarchy. Long gone are the days of abstraction — this here, is something you can actually see.

What’s more easing than adding a component with just a click while keeping together the perfect component hierarchy in a beautiful D3 glowing environment? Besides your happiest moment as child on that gently warm summer’s day, probably nothing.

Add a Route, Link or Component with just a click.

Stay tuned as our state store features, and statistics for each component are released! But, even now, you already have everything your heart desires (if your heart desires SEO optimization, debuggers, and other reasonable things)! Wow!

All comedy aside, the team behind RomeJS’s only goal is to make life easier for the developer. This is an open-sourced, free tool for the community, by the community.

We have just launched, and hope to see all your pretty faces here!

Sincerely,

Team RomeJS

Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.
If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!

More Related Stories