Set up a proper website

[developit]

It's time Preact got a legitimate website. Feel free to add your vote.

Features

• Documentation (migrated/copied from wiki)
• Add-ons & Integrations Gallery
• Examples
• "Try It" Editor
• Demo Gallery

[katopz]

• Comparison with Other Frameworks (size & speed) like this or this or maybe this
• More Examples : Meteor (>32k star!), Semantic UI (>23k star!), threejs (current threejs codepen example is not show how to pack it btw I did use preact+threejs+webpack and it working but I'm not so sure I do it right or wrong because size is somehow still huge than expect)
• How to bundle properly, best practise (and maybe roadmap) : rollup, webpack, jsnpm

Cheers

[developit]

Sweet, thanks for the suggestions. Definitely bundling is a huge one, I really like Babel's "configurator" thing that shows you the steps for your selection of tools.

[katopz]

Cool, Maybe Yeoman?

• Yeoman generator : https://github.com/newtriks/generator-react-webpack

[developit]

@katopz yeah, that would work. I've actually never use Yeoman, but it seems like the right tool here.

[idchlife]

About yeoman, maybe not so good for this situation, because it's kinda becoming less popular (imo), when working everyday with your own configs or when you first start using new tool.

I think we need something like babel configurator really. I personally setup webpack + preact, and really liking it.

How can we you with new website?

[developit]

All good points. Personally I have never used Yeoman, but I have used boilerplates. Both share a common issue: after the initial project setup, you don't get updates if the boilerplate/generator changes. That can be painful for version migration and can make long-lived projects difficult to maintain.

To that end, I'm really hoping someone (you? me? us?) builds a tool that wraps up Babel, Webpack, etc into a command line that just takes presets (like Babel 6 does, as you aluded to). I think that type of tool would make starting new projects and keeping them updated a lot easier. Also much easier to explain :)

As for the website, I will try to get a basic structure together and open it up for everyone to contribute to.

[idchlife]

About command line tool you're talking about. I did not use any tool for generating something for a long time. Is there even a case for newcomers and many new people who would use it for creating new project for example like this?

preact-starter --build-system=webpack new-preact-project

You're talking about this kind of command line tool yes?

My opinion on case:
When using things like this, you don't really have control over dependencies, knowing what you are using, which versions etc. This is imo why Yeoman is cool and stuff but it's not THAT cool, because starting new project becoming a useful everyday practice, event if you're freelancing (of course if you have one desired template for that special kind of project - you're welcome to use yeoman but even in this case you might stumble upon realization - simple copy-paste of webpack.config.js and package.json in more than enough).

[idchlife]

Oh, I just discovered your preact-boilerplate project on github and realized that your point of view is slightly differs from mine in case of starter-kits. My starter kit is significantly smaller. Just js babel loader with presets and plugins. That's all.

I this case something like starter is needed indeed.

[developit]

Re: CLI tool - I was more thinking something separate from webpack. You're a power-user, so you would probably prefer the full power of webpack and babel at your disposal. But for newcomers, what about something like this:

# install the CLI tool and a preset
npm install -D es-app es-app-preset-preact

# create the initial project structure
./node_modules/.bin/es-app init
# asks questions like "less or scss?" and "use css modules?"

# now the app is created, we can build:
./node_modules/.bin/es-app build

# ... or watch:
./node_modules/.bin/es-app start

# these would automatically be aliased to `npm run build` and `npm start`

The dependency nesting is definitely an issue though, people would basically be stuck with whatever version of webpack+babel+less (etc) ship with that "es-app" CLI tool.

Anyway, that's just something I've been throwing around in the back of my mind as I watch the webpack scene evolve. I'm sure there will be lovely solutions to this at some point.

Regarding preact-boilerplate, it'd probably be better named something like "preact example project". Ideally for a pure boilerplate (for starting new projects), I prefer something more along the lines of what you mentioned: just some configuration files and maybe an index.js, but no actual app you have to delete. I think the less and css modules stuff in preact-boilerplate is overly opinionated and ends up helping some, but being a nuisance to others.

[idchlife]

Something to think about - what if you have something like this on website. You choose build tool, presets, options, then you press "download starter kit" - it generates several files, archives it, gives user this archive with simple instructions (popup e.g.) like "Just run npm i --save-dev and you're good to go with webpack --watch/another chosen cli tool".

Thinking of it like of improved babel constructor.

[developit]

@idchlife yeah that would be nice. It'd actually be really easy to do both, since typically any CLI module is also available as an API that could be imported. Have you seen OverReact.io? Seems similar (but specific to react and very few options).

[katopz]

For yeoman it should like https://github.com/kriasoft/react-starter-kit
Maybe we should fork it and add preact sugar on top, am I right?

For CLI I think it would be like https://github.com/reapp/reapp#cli

BTW, yeoman seem healthy and active to me judge from github activity and http://yeoman.io/generators/

Cheers

[developit]

Neat, I think I had seen reapp a while back and forgotten about it. Looks like a React-specific version of what I described, so it's nice to have some examples of how that worked for them. Looking into react-starter-kit now - seems opinionated, but that can also be beneficial if the opinions are commonly held.

I'm thinking the "configurator" approach pitched here would help meet the various differing needs. Personally I'd love to have something that drops me immediately into a productive setup instead of having to use tools like JSFiddle or Codepen for my prototyping work. That was how preact-boilerplate started, but I have other versions I could publish that focus more on longer-term projects (testing infrastructure, etc).

[idchlife]

The thing about prototyping - at what point you might need components separated in different files? I often find myself in situation when it's not enough for me - one file for prototyping. I use babel io 'try it' page to check what es2015-2016 can and cannot do. Rarely I create some classes, functions etc. But not for real prototyping.

So configurator will be nice. Also about demo gallery, maybe examples will be enough?

[idchlife]

Also for examples, I found something neat today: http://www.webpackbin.com/

edit: I created issue there and author is going to implement changing pragma in next release. So we could use it for examples and also for prototype projects!

christianalfoni/webpack-bin#21

[developit]

@idchlife That is awesome, I'm excited for the pragma setting. I've been using esnextb.in, which uses browserify-cdn under the hood, but I haven't don't use browserify for anything else so it's a bit odd. webpackbin.com seems absolutely amazing and it has my most wanted feature from codepen/jsfiddle/esnextb.in: multiple files! Preact works fine if you set the pragma from a comment btw: http://webpackbin.com/Vkb_Yfjhl

[idchlife]

FYI webpackbin ready for usage with pragma:

http://www.webpackbin.com/

[developit]

Was very pleased to see the default value when you choose "pragma" is already h()! Little bit of vindication :)

[katopz]

FYI : This two repos has really well struct btw

https://github.com/davezuko/react-redux-starter-kit
https://github.com/SpencerCDixon/redux-cli

Cheers

[developit]

@katopz @idchlife et al: I have a prototype website up and running here if you want to check it out:
https://preactjs.com

It currently includes documentation, examples, and has a pretty decent live-coding REPL powered by Babel 6 (with async support! and threaded compiling!) Will be open-sourcing shortly.

[katopz]

@developit My upcoming project will use preact for sure! I'll keep bothering you along the way, be prepare! 👯

[developit]

I'm so ready :)

[idchlife]

@developit wow congratulations on launching website! I'm willing to help with it, just mention me)

[developit]

Source code is published here btw: https://github.com/developit/preact-www

[developit]

I'm going to close this one out, since I've created issues for each of the remaining suggestions in the preact-www repo. The CLI discussion probably needs to be continued, but that can happen in es-app-cli or whatever it ends up being called ;) Thanks for all the suggestions and comments, was super useful in putting the site together.