UIBase Experience Initial thoughts by Debjit

UIBase Experience

Arun returned from work. It was already 9PM; a long day was over. Or was it? Tonight he intended to start coding his project. It was a simple affair, a hobby project he had been thinking about for quite some time. Due to the usual work pressure, he had been delaying this project. But, there was another reason, his inexperience with front-end. He was confident of completing the server-side in a few months. Even though the first few services were ready, he was unsure about the front-end.

He was familiar with JavaScript but no expert. Every framework he had tried until now had seemed great at first, but reading code for a complex project built with those frameworks had always been challenging. Maybe the developers did not design the application for readability, but shouldn’t the framework help there? Maybe they should, maybe they shouldn’t, who was he to judge? He just wanted to get his front-end done quickly and without hassles.

Today he wanted to try a new framework, something his friend suggested last Friday over drinks. His friend had been using it at his work. He had good things to say about it. And why wouldn’t he! He was the one who made technology decisions for his team. But what suits an enterprise, may not be so great for a hobby project with one person working on it.

He had visited the website and really liked how he could directly try building a small demo app right there. Although, he had not tried doing it yet. The overall look and the amount of documentation left a good aftertaste. He seemed hopeful, maybe his friend is right. He intends to go beyond the demo today. He had glanced at the 'getting started' part of the documentation; he thought, he can always learn the rest as and when needed.

As he switched on his laptop, he hoped tonight’s findings would be more interesting than his dinner. On opening the website, the “Getting Started” was prominently highlighted. He noticed there is also a video version of this document. But he preferred the written word.

The document asked him to first install an npm package. Ah! The dreaded CLI!! Let’s go with it, he thought. Once installed, the document was asking him to run the command uibase new, which he did. Various questions started popping up. Oh dear! Long list of questions to answer, the name of the project, ok; quick prototype or long-term project, what?? Really?? As the description explained choosing long-term project will leave a lot of options open for the developer which can be later added manually and some through the CLI. The quick option will make opinionated decisions but will give a full-fledged application with best practices (opinionated) baked in. Oh hell! Let’s do quick, he thought, can delete everything and start again if required. He made a mental note to look into the documentation for 'long-term' option later.

Expecting the new folder to be filled with a huge list of files, he was mildly surprised only to see three files at the top level, src folder, package.json and .gitignore. Even inside the src folder, there are just index.html, app.js and routes.js. He turns to the terminal again; the create command has exited with a witty message, asking him to take the next step by running the npm start command.

He punched in npm start, knowing well enough that it will open a browser tab. A new tab opened up as he had assumed, but what showed up surprised him. He had expected a "Hello Something" page; instead, it showed a beautiful interface with a large floating arrow pointing to a button “Run”, with some other buttons close to “Run”. As he glanced around, he saw a single “App box” in the center of the screen, a list of something (looks like components) on the left and some form elements on the right, looked like properties for the App box.

He could’t ignore the arrow any longer and clicked it. A new tab opened up with words “Hello Human” in the center, a button and a text 0. Clicking the button incremented the 0 to 1, then 2 and so on. Ah! The increment example. Why didn’t they go for a more real-world example?

Returning to the builder (as it was titled), the UI didn’t seem too busy, with only a few items on the screen. On the left, he now noticed, were "button", "text" etc. grouped together but below that group, were things like Count, Delay, … Hmm interesting have to explore those. In the center it seemed the “App box” was selected. On clicking it, a subtle animation suggested it has been selected (again). Almost instantly a tooltip showed up on the box saying “Double click to edit this component”. Finally some code. Alas! He was disappointed, the App box folded itself and moved to the top while the center showed four boxes, a text, a button, another text and a Count. Arrows were going between some of them such as, an arrow came out of the button and attached itself to the count, another arrow came out of the count an attached itself to the text. Clicking (which selects) on the components, highlighted the arrow affected by it. There was a tab at the top saying Layout that he had not noticed earlier. He was about to click it when a loud thud announced the arrival of his roommate/friend. With mixed feelings, he put his laptop to sleep. It was time for some drinks, after all, it is a Friday.