Live data from Hacker News

Show HN: A minimal setup for React/ES6 sites with a Firebase back end

github.com

31–40 of 40 posts

Re: Show HN: A minimal setup for React/ES6 sites with a Firebase back end

#31
post #27

Earlier quoted context omitted.

Yeah, how is this a lot of dependencies? babel-core, babel-loader, babel-polyfill, babel-preset-es2015 and babel-preset-react can be considered one dependency (it's babel...). react and react-dom are another. webpack, the dev server, and 3 webpack plugins can be considered a 3rd. That's 3 "real" dependencies. If that's a lot, then i'd love to see a "real" minimal setup. Just because javascript dependencies tend to ta…

JavaScript dependencies are to Unix philosophy as C++ is to object-oriented programming... In name only, and seemingly in complete misunderstanding of the concept.

Can you expand on what you mean?

IMO JS hits all of the points of the unix philosophy:

1. Make each program do one thing well. To do a new job, build afresh rather than complicate old programs by adding new "features".

2. Expect the output of every program to become the input to another, as yet unknown, program. Don't clutter output with extraneous information. Avoid stringently columnar or binary input formats. Don't insist on interactive input.

3. Design and build software, even operating systems, to be tried early, ideally within weeks. Don't hesitate to throw away the clumsy parts and rebuild them.

4. Use tools in preference to unskilled help to lighten a programming task, even if you have to detour to build the tools and expect to throw some of them out after you've finished using them.

Following that, babel reducing its "main" code down to a "useless on it's own" core, and allowing all functionality via plugins fits perfectly in that ideal. Then there are "presets" which can be built on top of them to include many of those plugins as one dependency, and a package to polyfill things that can't be "compiled" at compile time (babel-polyfill).

If i don't care about optimization, i can just throw everything in there and it'll work. If i want to cut down on the size, i can look at my target browsers and drop things (like babel-polyfill, or in some cases even most of the plugins from the babel-preset-es2015), and can install and run only what is needed.

it also makes writing new features into something like babel simple as hell, you can do it in a 10 line plugin. That makes it extremely simple to avoid bloating other plugins with options/features and instead encourages new plugins that do what the option/feature wanted.

Re: Show HN: A minimal setup for React/ES6 sites with a Firebase back end

#33
post #16

Nicely done! I did a similar thing with the VueJS/horizon.io combo. It's a little rough around the edges - I just wanted to have some sort of scaffold for personal stuff. Link is https://github.com/kylestlb/vuex-horizon-scaffold for anyone interested. And yes, there are tons of devDependencies so I wouldn't call mine minimal I suppose :)

Awesome! I've been using horizon.io in combination with React (and Redux, because I'm all hip and stuff!) for 'scratch-my-own-itch' projects and on the whole I've been very happy with the process. While there are some obvious limitations to using Horizon, it's incredibly convenient for quickly getting something working that 1) is online, public-facing, but secure (OAuth), and 2) provides a CRUD back-end very quickly…

Is there any source/sample you can share ?

I am starting on a big SPA project. react+horizon+rethinkdb seem ideal for the read-only parts, but i worried about how to integrate some business logic which will require relational transactions on the backend

Re: Show HN: A minimal setup for React/ES6 sites with a Firebase back end

#34
post #14
post #7

Apologies for the question but what benefits do I get if I build on firebase? From the people I talked to it seems that the main audience for firebase is mobile engineers that either don't have the skillset or the time to learn how to build a backend system. Most people I talked to also told me they wouldn't use firebase if they could build a backend.

In addition to the other comments, by only needing to write frontend code you can also host your website much cheaper and scalably (via something like amazon S3 & CDN). You'd pay more like several pennies for 100's of users (ignoring any scaling costs w/ Firebase) rather than a min of ~$10/mo.

Fwiw, Firebase also provides static file hosting.

I've added an issue to document the process for uploading to firebase after building a production version.

Re: Show HN: A minimal setup for React/ES6 sites with a Firebase back end

#35

Nicely done! I did a similar thing with the VueJS/horizon.io combo. It's a little rough around the edges - I just wanted to have some sort of scaffold for personal stuff. Link is https://github.com/kylestlb/vuex-horizon-scaffold for anyone interested. And yes, there are tons of devDependencies so I wouldn't call mine minimal I suppose :)

Nice. Yes, this is the scaffolding for my personal stuff, branched off and with a README :)

Got to check out your stuff - I've heard about vue.js but am not very familiar.

Re: Show HN: A minimal setup for React/ES6 sites with a Firebase back end

#36
post #25

Does this come with Server side rendering out of the box?

No.

It's intended for static hosting, where there is no server-side rendering (much of the point of firebase). At the moment it just does concatenation and minification, but the files are rendered on the client.

This isn't ideal, obviously - it's still unclear to me whether Google successfully crawls ajax sites. I would like to add build-time rendering, but it's of debatable value for static sites, since obviously, it can't be dynamically generated.

The hack for now would be to hard code 'content' into the React render target ``, so that it lands immediately.

Re: Show HN: A minimal setup for React/ES6 sites with a Firebase back end

#37
post #5
post #2

https://github.com/Jon-Biz/simple-static-react-firebase/blob... Sorry, but with those many dependencies, I could hardly call that minimal.

Most of those should be "devDependencies", as they're used for build-tooling not for the actual codebase, but I'll be honest I'm right there with you: my major drama with modern front-end dev at the moment is the sheer amount of dependencies that are "required" in a traditional toolset. That said, leveraging Browserify, Bubleify[0] and Ramda[1] alone can get you pretty far in a seriously maintainable way with modern…

I dunno, I think what you are describing is a practical stack, not a minimal one.

For me, a minimal stack is just an HTML file(possible with a JS file as well) that loads React and Firebase via CDN, and then relies on browser's shipped ES6 capabilities to write code.

But in that sense I might be trolling here since nobody actually does that :)

Re: Show HN: A minimal setup for React/ES6 sites with a Firebase back end

#38
post #33
post #16

Earlier quoted context omitted.

Awesome! I've been using horizon.io in combination with React (and Redux, because I'm all hip and stuff!) for 'scratch-my-own-itch' projects and on the whole I've been very happy with the process. While there are some obvious limitations to using Horizon, it's incredibly convenient for quickly getting something working that 1) is online, public-facing, but secure (OAuth), and 2) provides a CRUD back-end very quickly…

Is there any source/sample you can share ? I am starting on a big SPA project. react+horizon+rethinkdb seem ideal for the read-only parts, but i worried about how to integrate some business logic which will require relational transactions on the backend

I think in that case you can just build a separate express API that talks to the same rethinkdb instance, no? After all, horizon is basically just a front-end driver that wraps rethinkdb changefeeds.

Re: Show HN: A minimal setup for React/ES6 sites with a Firebase back end

#39
post #33

Earlier quoted context omitted.

Is there any source/sample you can share ? I am starting on a big SPA project. react+horizon+rethinkdb seem ideal for the read-only parts, but i worried about how to integrate some business logic which will require relational transactions on the backend

I think in that case you can just build a separate express API that talks to the same rethinkdb instance, no? After all, horizon is basically just a front-end driver that wraps rethinkdb changefeeds.

Yup. It should be pretty easy to set up an Express server that uses Horizon for some of the simpler stuff, and your own routes/logic for more complicated work.

Re: Show HN: A minimal setup for React/ES6 sites with a Firebase back end

#40
post #39

Earlier quoted context omitted.

I think in that case you can just build a separate express API that talks to the same rethinkdb instance, no? After all, horizon is basically just a front-end driver that wraps rethinkdb changefeeds.

Yup. It should be pretty easy to set up an Express server that uses Horizon for some of the simpler stuff, and your own routes/logic for more complicated work.

Thanks both.
Post reply on HN