Project templates / React Native design tutorials

[dabbott]

We've been discussing project templates for a while, e.g. I want to create a new project with redux + react-native-router-flux.

A very compelling first use case would be to help beginners learn React Native, with a focus on design. After chatting with @jondot, I propose we add the tutorials (called Katas) from https://github.com/jondot/ReactNativeKatas as project templates.

A rough idea of how it would work:

I open Deco for the first time. I know JS and React, but not React Native. There's a button for Tutorials.

If I click it, I see a list of tutorials I can do. Maybe we put a ✅ by the ones I've already done.

Picking a tutorial will do what any project template will: create a react native project in the temp directory (just like we do currently) with files specific to that template. You can "save" or "save as" just as you would normally if you want to save your progress, or you can follow the template without saving and never clutter up your file system.

What's involved here technically: come up with a way to instantiate different default files based on project template selected. Probably safe to assume we can bundle them all with the Deco binary for now, rather than downloading them on the fly. Then add a UI to the launch screen.

[adityakandari]

Great idea..and when is the boilerplates section coming to release?

[cantecim]

+1 great idea

[jondot]

I've just finished going through some Katas with Deco, it's been even more immersive than my usual setup!

Here's some input, that I imagine template projects will need in general:

• A 'bootstrap' automation script. In this case, after a template is instantiated you want to run a native build (cmd+B), so that might need an API into Deco
• A 'starter file' that is opened automatically. In this case, while a new template is being built, as a user, I can view the first file of a template - which can be an index.js file with a nice comment that serves as an introduction into that template
• I guess these all can be specified in package.json

The following is two options into what I think may be a good tutor:

• Within the comment above, that exists in the starter file, deep-link each file mentioned into the existing project hierarcy to let the user go back and forth along the project tree
• Ditch the 'starter file' comment approach, and have some sort of scripted walkthrough - which will make this editor unique, and I think the price for doing this is relatively small, since there are already many tutor libraries in the Javascript/web world (but I imagine this might add a big product/ux planning and overhead)

Tangential:

• Launch a simulator with live-reload already enabled (not sure if this already exists in default deco projects)

[dabbott]

Great job so far :)

A 'bootstrap' automation script. In this case, after a template is instantiated you want to run a native build (cmd+B), so that might need an API into Deco

This is a good idea. Actually, you can expect an API for accessing the building/simulator/packager pipeline this week from @gdowens. It uses a separate config.deco.js and gives you very fine-grained control. It will probably be necessary for advanced templates. That said, I'm wondering if just for the katas we should try to skip the build step, since it's the last bit that will have a significant delay. We could:

1. remove native modules from that katas, so they can run using Deco's default pre-built ios app. if vector icons is the only native module, it might not be that critical to keep it. (I think this was the case last I checked)
2. pre-build an ios binary for the katas. it would increase the size of Deco to bundle it, but would also improve the user experience, so I think it'd be worth it.

I prefer option 1... but am open to 2, or coming up with a good way to build templates, or other ideas.

A 'starter file' that is opened automatically. In this case, while a new template is being built, as a user, I can view the first file of a template - which can be an index.js file with a nice comment that serves as an introduction into that template

Makes sense. A couple options I see here:

1. use the existing package.json main field. (probably wrong some of the time)
2. make a new field deco: { main: "index.ios.js" }
3. open README.md if it exists. I like this option, since it's a more natural place to put instructional comments, and we could (eventually) render it as markdown with links and images and whatnot. Maybe deco.main can still override. The only problem with this approach right now is... we don't have the editor set up to switch between language parsers (jsx, markdown, etc). So probably go with deco.main for the time being, but assume that it will eventually default to README.md.

So I'm thinking 3.

A scripted walkthrough would be amazing. It sounds pretty big in scope, so I'd say that could be phase 2, once we get the Kata template creation working well. Phase 1.5 would be the README.md approach I think - and perhaps we could come up with a special way of structuring your README that will power the walkthroughs. So we can provide a smooth upgrade path for library authors who already have their docs in a README, but want to do something a little special in Deco.

Tangent: we actually attempted to enabled hot-reload by default. Not really sure what the status of it is now that we bundle RN 27 in master, but in the production version (we bundle RN 22) we weren't able to get it to work.

[jondot]

@dabbott I like how you think! 👍 I was pondering about removing vector-icons a few days ago, just to reduce friction. But now I'm remembering that there's a pretty heavy usage of RNFS (saving images, comparing images, removing them). This opens up a new train of thought for me, I might be able to do all this in-memory - basically saving UI snapshots as base64 in-memory (though I'm not certain how much memory that would take). I'll try a spike for the in-memory thing soon.

README.md should be great!

Walkthrough might be a quick win but I guess the amount of work really depends on how such an intro library would work (something like this I guess). So regardless of Katas, it might make a nice introduction for Deco. Having said that - I'm guessing most Deco users are pro users so far so that would be too soon to do :)

[jondot]

Just to file this here, there are a couple templates which we did during the FB hackathon here that might be worth looking at:

https://github.com/react-native-templates