I’ve had an idea stuck in my head for the past year. That idea was to create a new web application. A new web application that can run precise database queries on Windows, Mac and Linux. It would be a beautiful application developed with the latest web technology. Being a front-end developer for the better half of my life, I’ve always been a firm believer that HTML/CSS/ES would be the longest surviving core technologies. Nowadays we use web technology so much with applications that I knew pursuing that path was the right way to go. Apps made using Electron (source: https://electronjs.org/). To begin my journey with web technology and application development, I started using the popular open-source framework Electron. In this framework, I used Webview as a renderer and bundled components made from React into a Webpack to create a Single Page Application (SPA). The new application was named QueryPie. The QueryPie development team decided to plan the issues needed for application development and manage them on a Sprint basis, bundling up tasks into 2 week segments. At the end of each Sprint, we decided to write a review of our experiences during the Sprint. Today, I want to talk about how the most basic layout of QueryPie was born. Process of QueryPie Layout development: First Layout: Slack Style. Our first design was very similar to the Slack layout. The above image is the layout we decided on when the new application was first proposed. When I drew this first layout, I thought it would be better to arrange windows from left to right in order of access information, database and object information, Query editor, and finally execution results. As you can see this design has a simple structure, which has components to enable smooth writing of SQL queries and easy viewing of the results. But after I made it, I realized that it felt a lot like Slack. At that point in time, Slack was one of the most successful applications on Electron. I admired the design so much that I had unknowingly followed it. And although I liked the simple style, I felt that there was a lack of space to check important object information for a database tool; like tables, views, triggers, and functions. So it was time for some revisions. Second Layout: Sequel Pro Style. The second layout we considered was the Sequel Pro style. Our CEO, Brant Hwang, favored this style the most. Choosing this type of layout had the advantage of intuitive viewing of structures, content, relationships, triggers, and information in terms of tables (objects). To maximize this intuition, the list of objects on the left is presented in a list rather than in a tree. A large icon on the top bar is placed so that the desired information in the selection table can be viewed like a menu on a website. To be honest, the first impression I got from this layout was that it was awkward. This configuration seemed strangely offbeat, perhaps because I was so accustomed to the UX in Windows software. But the more I looked at it, the more it grew on me. Database management programs are also adopting increasingly simple designs. While there may be differences between the design and the actual implementation, the overall direction and goals of QueryPie are being set.
