Introducing Init - Feedback thread

Hi everyone,

I’ve been working on a side project to build a fast prototyping tool for Ionic apps that I’m calling Init.

Init accelerates the creation of new apps built on Ionic, and would be useful for:

  • Building out a PoC in Ionic to share with a team/boss/manager/client/etc.
  • Quickly scaffolding out the routing for a new app (including tabs and, in v2, menu)
  • Integrating with third party services or adding custom templates to your app quickly (v2)
  • Having fun and learning from Ionic components and code output

I am releasing the first version as a Preview (see FAQ below) in order to get feedback and start involving the community in the evolution of the tool.

Current features

Init today supports the following functionality:

  1. Three basic app templates (social network, basic utility, and blank)
  2. ~10 pre-made templates covering common app functionality (login/signup/settings/feed/etc) (lots more to come)
  3. Edit text and properties on elements on each page
  4. Preview your app in realtime as you build it and link pages together
  5. Quickly wire up tabs, add inputs to forms, edit slides, and other complex operations
  6. Customize the theme and icon(*) for your app.
  7. Import third party templates and build your own
  8. Export engineer-quality Angular, React, and Vue* code with routing and theming wired up

These features are not finished yet as of 11/6:

  • icon export not yet ready, in progress
  • Vue tabs routing not correctly wired up

Feedback and Try it

Init is very new, and has only been in development for about a month in a half. My goal was to get an MVP out that showed the concept, had some functionality, and would be useful to elicit feedback and ideas about the direction of the tool.

Please reply to this forum thread with feedback or any thoughts about the tool!

You can try it here: https://init.page/

Roadmap

I’ve got plans to improve Init quite a bit based on the feedback during this Preview.

An extremely tentative roadmap looks like:

  1. More templates! The primary focus of this tool is templates and opinionated design. Currently the templates you see were built by me, but the next release will have a ton of templates designed by @benjsperry which will look a lot better than what’s there today

  2. More features for template extensions. I want to get to a point where you can add a Firebase or AWS Amplify template and it is usable in some way

  3. Run apps directly on device w/ native functionality. Essentially a “live preview” app along with the support for templates to run actions (including accessing native code)

  4. Data scaffolding using a global store approach. Imagine being able to mock up data by having a global store (used in redux/pullstate/MobX/etc.) and then setting values on buttons/labels/etc. bound to that global state. Then, exporting engineer-quality state management code.

  5. Importing data from a spreadsheet or other data source. For rapid prototyping Spreadsheets have become incredibly popular. Along with the state management feature above, enabling pulling in data sources especially those in spreadsheets.

FAQ

How do I get started?

Just go to https://init.page/ and create your app.

How much does this cost?

Nothing! It’s 100% free and requires no sign up. That won’t change. If we do add signups or paid plans, it would be for optional, advanced features on top of what you see today.

Is this like Creator/Studio/etc.?

Yes and no. It’s inspired by and shares some code with those efforts, but instead of being a commercial/enterprise app building product, Init is a basic free tool to get more people building apps and doing it with Ionic.

How do I drag-and-drop?

You can’t! Init doesn’t support drag and drop (currently). Instead, it’s focused on templates and creating a “good enough” foundation to start customizing your app later in code.

That may change based on feedback and demand.

Will my Data be saved?

Don’t count on it. This is a preview. The backend for storing and managing apps only guarantees your app will be saved for a few weeks at best. Assume everything you do in the Preview is temporary.

What was it built with?

This is a React app built with Next.js and using some Ionic core components :blush:

Is this an official Ionic product?

No! At least not yet. I wanted to experiment with a different take on rapid app development tooling and see what people thought. If it’s a hit, we will definitely think about how to incorporate it into the Ionic experience.

This means please do not file Ionic support requests, issues, ping anyone from Ionic apart from @maxlynch on Twitter, etc. Please post issues and feedback in this thread as that is what I will be monitoring.

9 Likes

Hi Max!

Very impressive start to this product. Here’s some notes I took as I messed around:

  • App Theme - it was hard to know where to click to change the theme. Maybe make the text clickable as well as the icon?
  • The “Mobile” button wasn’t particularly clear. Something along the lines of “Preview Device” (though I don’t like this exact phrase either) would be more helpful.
  • It wasn’t clear that I could change the name “My App”.
  • I didn’t realize why the items on “Tabs” are read-only for a bit.
  • I couldn’t figure out how to add new components to Ion-Content, though I could duplicate and edit list items easy enough.
  • Very impressed by the generated output.
  • Much more polished than I expected, very impressed.
1 Like

Hi Max,

Already very impressive. While playing around I got an idea. What about creating a code panel next to the property panel. In this panel you can edit the page in a kind of SwiftUI coding style (IonicUI :wink: )

2 Likes

Great feedback! A few questions:

App Theme

For the button, do you mean the button in the toolbar? The text is clickable, or are you referring to something else?

Mobile button

Yea, agreed, need to rethink that option

Tabs being read only

Do you mean when you couldn’t edit the dimmed-out page contents when viewing them from the tabs page?

Adding new components

Yea there’s no universal way to do this. Wanted to avoid drag and drop for now but need to think about a middle ground because the functionality to add new components is already in there and working for some components (forms, duplicating elements, etc).

Will definitely act on this feedback!

Like edit the HTML? Yes, that would be possible and interesting (the guts are there for that) but I wanted to avoid getting too far into editor territory. Will think about it… Thanks for the feedback!

2 Likes

not only HTML, but a real DSL. For example :

IonPage  {
  VStack {
    IonInput('Name')
    IonInout('City')
  
    HStack {
      IonButton('OK')
      IonButton('Cancel')
    }
  }
}

Just describe what you want…(declarative)

Trying to understand, what’s the benefit of this over using HTML?

Hi Max,

A few days ago I read the Thoughtworks’ Technology Radar and DSL’s were mentioned to create diagrams. Then I got you’re invite for Init, so I got the idea you maybe could use a DSL for creating Ionic apps.

If you use a DSL, you only have to specify what you want, not how. The ‘how’ will be generated. So you don’t have to worry a html or typscript coding.

I believe also Flutter is also using a DSL for describing the UI (https://codeburst.io/80-of-my-coding-is-doing-this-or-why-templates-are-dead-b640fc149e22).

It’s interesting for sure. Gave me some ideas, but probably something to come back to at a later date.

1 Like

I meant when the modal is up I didn’t realize the circle color icons were clickable, I thought it was just displaying the current pallette.

Correct - on their own, I didn’t realize they were dimmed/disabled. Something didn’t correlate the opacity between the tabs and the opacity on the page to tell me that it’s intentional that the list items were not mutable. Wondering if a better cursor or maybe an overlay with a message would be more guiding.

Makes sense!

Hi @max max

Thank you for another great goodie from the Ionic franchise.

Overall I am struggling to position this in the full suite of things. As you say, creator, studio etc.

My 2cts would be to consider positioning this as the go-to place to scaffold your inital app before going into your favorite dev environment (including chosing JS framework or other integrations). So it could replace the CLI to generate a demo app using one of the templates.

Almost like a wizard style:

  • first choose the interactions you envision (login, settings, tabs, modals) - even using a market leading app (like Facebook, Tinder, Google Maps etc) - setting the UI stage. In dev time I can easily copy components to reuse them or tweak them.

  • second choose the integrations needed - Firebase, Azure, AWS, etc… Including the libraries/services to put in there. And in dev time I will wire the UI up to these elements. I don’t need this service to do this for me (nice-to-have)

  • third choose native integration - Capacitor/Cordova, and during dev time wire them up again

  • fourth choose the JS framework

  • etc… (theming…)

All with the intention to export for local dev, to studio or to creator. And by no means an app that already functions (or even runs) out of the box. Happy to to some coding afterwards.

And to give power to the community: create some sort of marketplace for other lego pieces that fit in the above categories. Also appealing to what is happening a lot: sharing pieces of the puzzle, instead of fully developed and functioning template apps that will break because of updates or is not up to latest version.

If you make this to output a functioning app, I am afraid you wind up redoing lots of the work others technologies do better (Creator, Studio, VScode, etc)

Cheers

Tom

Yep that’s exactly what I’m going for here. The use case isn’t exclusively for your own development though, one problem I’m trying to solve is building PoCs to show clients/bosses/etc. which is a common task we see.

Also re: Creator/Studio, both of those products are dead so this is going to overlap with those a bit and I think that’s okay.

Ok, great,

Lots of fun stuff to gain, pending the Persona you are targetting (beginner, no-code, high-code, back-end etc). I cannot say on behalf of all corporate PoC builders, but I reckon the integration element makes it pretty cool - ao. O365 such as in our company. Many bosses don;'t have the faintest clue that things can be done just by bringing them together. That is why Power BI (a.o.) is so cool as well - and solves many corporate issues (besides introducing maybe others)

Nice UI development can also be done using Figma (hint: Ionic Framework to release own Figma template on UI elements?), so not much to gain trying to build a tool to tweak UI elements (and just UI prototype)?

Good luck.

Regards

Tom

1 Like

For those that have tried it, I’d love to know what you think!

Also would be curious how you could imagine yourself using this. If it’s missing a key feature you’d need before you could find it valuable, that would also be interesting to hear!

Alright I created a very crude CLI to create a full Ionic app from your Init app.

Someone want to test it?

Here’s how you use it:

npm init init-app --app APP_ID_HERE --framework react

Where APP_ID_HERE is the ID in the URL here: image

This will go and bootstrap a full Ionic app including all your generated code.

5 Likes

Fixed a number of issues in the code export for React and Angular.

Going to make the CLI above part of the official instructions shortly.

I just tried it and played around, it’s one of the product developments where my gut says: brillant, that’s what I need. A jumpstart for my apps, and perhaps enough for a quick showcase.

Pretty sure, I will play around with it.

Thanks @HeikoKanzler

Literally right as you typed this I pushed an update live to improve the app generation step. Now the Generate dialog has a command to run to automatically create and bootstrap your app.

I think I love it. Tried quickly a mockup of a concept I am working on, and I can imagine I would prefer to use Init rather then doing the wireframing / prototyping with Axure XP.

Quick feedback so far:
Usability

  • General: drag’n’drop to change order of items on pages
  • Form:
    • Option to clear the form to start from scratch
    • Option to add labels only
  • Theme Editor: only the circles are clickable, would be great if the title (primary, secondary…) would be clickable to

Bugs (I am pretty sure you’re aware of them anyways)

  • Created a list page, then deleted it, created a new list page, now I can’t change the class name and url path. It always reverts to ListDetail1 /list-detail1 (I clicked on the checkmark next to the input field). Seems to be a random behavior, not easy to reproduce.
  • Couldn’t use SVG file for Logos (Login / Registration page), it’s displayed after upload but then not shown on the page. PNG does work. I assumed SVG will work as the Ionic logo is a SVG?
  • There’s no ordering of pages. If you accidently click on “Make entry”, the order is messed up. You need then to make the pages in the right order to the entry page to get everything sorted (perhaps it doesn’t matter for the most)
  • List Page: I can select the ion-item and add a link, but the link then is not clickable in preview? (Added a text, too. didn’t help)
  • Form: cleared the form manually, added checkboxes, added accidently a toggle, tried to delete toggle, now the whole form is duplicated when I try to delete the toggle. Happened a couple of times now with different elements. If you move away from the page and back again, the default place holder is shown “now pages”. It looks like that deleting the Ion Item does create a copy of the whole form (Unfortunately, you have to delete page and start from scratch.)
  • After a bit of playing around, adding some pages and a third form, the screen wasn’t updated (displayed the previous page/form) and the inspector on the right side was gone. Had to reload the page.

Awesome, this is a great list for me to dig into!! Thanks so much