Introducing Init - Feedback thread

[brianwilsom]

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

[max]

Thanks!

You’re the second one to request this. What kind of code would you want to see? Given the tool supports Angular/React/Vue and I’d rather avoid any kind of compilation step for complexity and performance reasons, that leaves some kind of DSL as @Jurriens mentioned here: Introducing Init - Feedback thread

It’s an interesting thought for sure. The data representation underlying the tool already works in this way. Hmmm

[max]

Just shipped the ability to clear the form, and also add a button to forms.

Working on fixing one bug where appending new form inputs doesn’t always happen at the end of the form.

[HeikoKanzler]

With regards to a code editor in general: I like the idea, but then you open pandoras box, as ppl will start complain that the code editor is not powerful enough, needs customization - the whole lot. As a product manager, I would stricly draw the line somewhere between Init and VSCode (integrating with VSCode would sound like a cool idea. This would turn VSCode and Init into a Xcode or AppStudio for Ionic…)

With regards to the DSL, @max: introducing another dialect into the development cycle makes no sense for me, we already have HTML and Ionic Elements to describe the UI, why adding another DSL to describe what we describe?

[HeikoKanzler]

Awesome, I already planned to continue to work on my concept using Init and not Axure (or Sketch) this time, so I have to draft out three apps. Let’s see how this goes

[HeikoKanzler]

Tried to generate the code from CLI, doesn’t work

npm install -g @ionic/cli
npm init init-app --app xxxxxxx --framework angular

Result:

internal/modules/cjs/loader.js:983
  throw err;
  ^
Error: Cannot find module 'yargs/helpers'
Require stack:
- /Users/heikokanzler/.npm/_npx/7356/lib/node_modules/create-init-app/bin/create-init-app
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:980:15)
    at Function.Module._load (internal/modules/cjs/loader.js:862:27)
    at Module.require (internal/modules/cjs/loader.js:1042:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (/Users/heikokanzler/.npm/_npx/7356/lib/node_modules/create-init-app/bin/create-init-app:10:21)
    at Module._compile (internal/modules/cjs/loader.js:1156:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/heikokanzler/.npm/_npx/7356/lib/node_modules/create-init-app/bin/create-init-app'
  ]

[max]

Weird, looking into it

[max]

Oh, you need to be on Node 14, which version of node are you on?

Just updated the Generate modal to add that info.

[max]

Agree, the only reason I think it’s interesting is because you get some kind of high level way to represent both UI and logic.

With just HTML you don’t get that, you also are forcing users to work in a “framework specific way” which I wanted to avoid.

But I agree, there are a lot of challenges/issues with that approach so, for now, it’s just a fun idea

[HeikoKanzler]

Thanks, that solved it. I was on Node 12.something.

One feature request: would like to see a setting that allows (optionally) put pages in a subfolder. I prefer, like some others, to organize my projects in pages (or views), services,

/src
   /app
      /pages
        /page1
        /page2
       ...

What do you think?

[HeikoKanzler]

@max

for now, it’s just a fun idea

I am pretty sure, your box of ideas is full… If not, let me know. I might have also some fun ideas

[max]

Have at it, would love to hear!

[max]

Will think on this. Right now I’m following the standards we use in the starters. Assume you’re using Angular?

[HeikoKanzler]

Yes, I am using Angular for Ionic, but also other tools and (server side) languages, so most of the time the code is structured like

/views (or pages)
/services
/shared
/domains
etc

Not sure where the final code is generated, but perhaps an additional param on the CLI?

[max]

I’ll consider it! Probably out of the scope of the tool since you could pretty quickly make those changes to the exported code but I’ll put it on the list.

Also just pushed some fixes to form input adding and some general bug fixes.

[peterennis]

Icon selection issue:

[max]

Thanks, will take a look. Probably a version mismatch between my icon list and the version used in ionic

[DFull]

Hi Max!

Thanks for your job, this is a great tool!
Maybe another idea could be to set the statusbar parameters from this tool ? I’ve already done lots of PoC with Ionic and I have sometimes some strange issues with the statusbar behavior. That’s why I think it could be a good idea to set it from your template.

[max]

Great idea. Meaning per-page set the status bar config? Or are you referring to the fact that the app shows a good status bar color but that code isn’t generated in your actual code?

[Tommertom]

Glitch in App Theme?