Ohma Tokita

View on GitHub →


During the general application development, no matter you are building an app based on SwiftUI, Ruby On Rails or React, to make sure everything is going rightly, there's definitely some patter/structure or good habit or good practices that people are gonna follow especially working as a team. Basically and probably all app, no matter it's mobile or web or desktop, for easily controlling the project structure people are more likely intend to doing things modular and put them into separate places that are specific that module. Besides that people also intend to put some configuration things into a specific file(folder might be overkilled) called "Configuration.xx" or just "Constants.xx" or so.

For example, let's imagine a healthcare app which is recoding your daily medication and vitals data, no matter how simple or complex this project is, it's highly possible that people are all gonna put all things about medication into one folder, all vitals thing to another folder and so on. People may also very likely put their configuration or settings stuff into a specific file which will hold all of necessary constants like API base URL or screen with, height for mobile.

Next, which is also the most important thing is, since most of people are following above said, that would unavoidably make the developers to repeat the same thing when each time new module is added in, especially the modules are similar. Take a real example of my work which I built an app from scratch. A healthcare tracking app that there are Medications, Immunizations, Vitals, Doctor Appointments and so on. Basically they all have a list page to show all upcoming or available items as a list which each item showing some of the fields in that module, and there's a "Plus" button on upper-right corner to add new ones. When clicking one item in the list you can view/edit this item.

So as developers they will need to create "list" file, an "addNew" file, and maybe a style file for the GUI of each module. They will do very similar in the "list" file like putting all fields wanna show, in the "addNew" file, they will put all fields need to submit and so on based on what these fields are. As an experienced React Native developer, I know that basically the fields you need is what the states you should have for a module. So the question is why would I still keep repeating doing the similar/same thing for each module, why don't I just do this by a iterating a single command or a phrase/sentence, which AI will identify the module name, and core fields in this module you want, and then generate all I need according to the most popular and best practice equipped lib/tools and then just do a little bit tweak or customization then job is done? SO FAST!

Another thing inspired me is sometimes people wants to change the whole app structure from "tabs" to "drawers" or "gird", take mobile app as an example. It's very highly that developers know how to use "react-navigation" and they are gonna do tedious works about changing the Routes and StackNavigator, TabNavigators and so on, and suddenly one day the boss wants to change back, developers are gonna be very mad. So why don't we do it just by iterating a command?

Last but not least, it's not limited to React Native, but we can do "Hayai" in any other techniques such as SwiftUI, Ruby on Rails, and so on. In the future, the innovative way of developing software/app will be, instead of typing the keyword, we simply talking. Based on what technique you are using, just say what you want, let Codex AI to identify the topic, and properties and build it for you!

What it does

By utilizing Codex AI, within a React Native based app, you can just do things modular by iterating your module name, fields/states in VSCode cmd prompt. Hayai will let Codex AI to identify want you want and generate necessary code, especially boilerplate code for you. Unlike Wordpress or Joomula or other CMS, we are doing thing modular. We are trying our best to leave enough space for developers to customize what they will do and what they already have.

How we built it

Based on VSCode Extension, it's built based on Javascript.

Challenges we ran into

Current Challenges: How do we know the properties relations and how to correctly organize them in the "list" page. How to accommodate other GUI libs like react-native-paper other than NativeBase, since developers may choose other GUI libs even if Hayai chooses the most popular one. How to further understand what people want and guess the context and generate exactly what developers want.

Future Challenges: Entirely reduce or achieve 0 coding for developers by extremely advanced trained modular code generator, which means generating exactly what developers need by prompt only 1 time.

Accomplishments that we're proud of

Not only me, but also tons of other developers, I believe, they are able to use Hayai to develop apps in a incredible speed by just one prompt in the dialog, and do a little bit customization and the job us done. They can also switch app structure by existing modules by one prompt, instead of changing the code.

What we learned

There's still a long way to go especially for the future challenges, also Codex seems also not enough to fulfill some of the ideal scenarios.

What's next for Hayai

Just like future challenges, Hayai should not only work for React Native, just like its Japanese name, meaning "lightning fast"(Kaminari has the same meaning as a Ruby Gem and it's also about lightning so I choose different one). It should also have Ruby On Rails/PHP and so on for Web applications, Swift, ObjC for iOS, Java/C#/Electron for desktop applications, and all developers should use it on different techniques.