
Using React, Firebase, and Ant Design to Quickly Prototype Web Applications - gschier
https://nrempel.com/guides/react-firebase-ant-design/
======
ambewas
I love how ant design invents a new 'design language' and then it turns out to
be yet another bootstrap.

I wish we'd get a real revolutionary design system instead of these frameworks
that try solve all cases, and ultimately end up so generic you can't use them
for anything -other- than prototyping

~~~
kowdermeister
Bootstrap doesn't event define a design language.

I'm glad that there's a good UI lib that integrates with React at this level.

~~~
ambewas
Point taken!

------
iandanforth
In this mix I'd swap in Rekit ([http://rekit.js.org/](http://rekit.js.org/))
instead of plain create-react-app as it adds Redux with lots of timesaving
functionality built into an included editor.

~~~
EastSmith
Can I eject rekit at some point? Can I use VS Code before ejecting?

~~~
iandanforth
The newest version is built on top of create-react-app so yes you can eject, I
haven't done so though. You can use whatever editor you like, but you won't
get the automated features like "Create Component" setting up your js, css,
tests, and routes automatically. I expect this will be the biggest stumbling
block for most devs. I may be unusual that the transition from sublime to the
web based editor was very smooth and didn't slow me down.

------
MWil
Wes Bos' "React for Beginners" has been my go to for tutorials using React and
Firebase.

This adds Ant so I'll have to check that out. Thanks!

------
realPubkey
There is also a way to use a reactive database without having to trust google
by using couchdb+rxdb.

~~~
ravenstine
I'm constantly shocked by how few people know about CouchDB or PouchDB. Both
are amazing projects that integrate perfectly.

~~~
gschier
I thought about this a while ago but gave up because there weren't any good
CouchDB hosting providers. I don't want to host a DB myself these days.

------
tlarkworthy
I think the tutorial would be more complete if the example showed some basic
security rules. Even if it's a prototype, there is the chance that a joker
will delete all your test data _live_ during a demo.

~~~
nbrempel
Thanks for the feedback. I’ve been thinking about writing a guide on deploying
Firebase apps to production, I can include it there.

------
viggity
from the ant front page: "A design system with values of Nature and
Determinacy for better user experience of enterprise applications"

This looks like someone spent a ton of time building something that is
probably very useful. So, with all due respect, what the fuck does that even
mean?

~~~
bbaumgar
This is alibaba's react component framework. It's extremely high quality, but
unfortunately most the english is translated from Chinese, so awkward grammar
is abound. I suggest looking past that.

------
tootie
"Firebase’s core product is a real-time database service. This means that your
users do not need to refresh a page to see updates to the state of the
application and it"

"Once you have your Firebase project, provision a “Cloud Firestore” database"

Cloud Firestore is a traditional NoSQL DB and is not the realtime database
product.

~~~
nbrempel
“Cloud Firestore is a flexible, scalable database for mobile, web, and server
development from Firebase and Google Cloud Platform. Like Firebase Realtime
Database, it keeps your data in sync across client apps through realtime
listeners and offers offline support for mobile and web so you can build
responsive apps that work regardless of network latency or Internet
connectivity”

[https://firebase.google.com/docs/firestore/](https://firebase.google.com/docs/firestore/)

------
ConfusedDog
Initial look at the Ant Design, all of the images in the documentation are
broken, so is the ng.ant.design URL. That's not inspiring any confidence in
their ability guiding web application development...

~~~
gschier
Maybe they're being blocked for some reason? Everything looks good for me (in
Canada)

------
projectramo
Nice. Please do VueJS next.

------
PunchTornado
Shouldn't a deletefacebook involve stopreact? surprized to see react articles
on hn now...

~~~
TheAceOfHearts
React is a great tool with a permissive license. Abandoning it would be a case
of throwing out the baby with the bath water, IMO.

~~~
PunchTornado
aren't there actually a lot of issues with the license? and seeing that you
can't trust fb..

~~~
TheAceOfHearts
There were many concerns and the license was updated to MIT. I haven't heard
of any issues rising from the new license.

------
Mc_Big_G
I still can't believe everyone has accepted mixing logic and presentation is a
good idea. Html mixed with javascript is a mess and I can only imagine what a
"mature" React app looks like after a few years of iteration. I can't wait for
the "React turns out to be a shit idea" posts in a year or two just like we're
seeing with microservices. It's like a mass hallucination or something. Maybe
Facebook had Cambridge Analytica help them market React or something. At least
that would explain the brainwashing.

~~~
mcondit
This is such a poorly done react app, you can not take this as the current
state of react. If you've never seen a mature react app, and have at best
checked out a few blogs that try to compare it to other frameworks, then you
have not been exposed to nearly enough to make a real decision and are
throwing around empty opinions.

~~~
Mc_Big_G
I'll admit mostly ignorance since I've only done a Udemy react course and read
some blogs. However, I've never seen it done any other way. Isn't JSX an
integral part of React?

~~~
acemarke
I wrote an extended answer to this on Reddit a few weeks ago [0]. I'll paste
it here for ease of reading:

JSX is not required. Literally, all you need is to include script tags for
`react.js` and `react-dom.js`, and then you write "raw"
`React.createElement()` calls.

However, most people find that to be too repetitive. So, the "default"
approach is to use JSX syntax, which converts `<MyComponent a={1}
b="blah">Text</MyComponent>` into `React.createElement(MyComponent, {a : 1, b
: "blah"}, "Text")`.

Yes, JSX requires a transformation/compiler step. As I said earlier, a typical
"real" app needs build tools to bundle anyway, and you're probably targeting a
variety of browsers but don't want to restrict yourself to the least common
denominator subset of JS syntax, so you're probably already using a transpiler
too.

But, if you truly don't want to use JSX for whatever reason, there's plenty of
choices:

\- Write raw `React.createElement()` calls by hand

\- Alias `React.createElement()` as `h()` so it's shorter

\- Use a functional VDOM wrapper generation library like `react-hyperscript-
helpers` ([https://github.com/Jador/react-hyperscript-
helpers/](https://github.com/Jador/react-hyperscript-helpers/)).

\- Use a runtime JS templating library like Dominic Gannaway's `t7`
templates([https://github.com/trueadm/t7](https://github.com/trueadm/t7))

\- Use an actual separate templating library, like `react-
templates`([https://github.com/wix/react-
templates](https://github.com/wix/react-templates)) or `handlebars-
react`([https://github.com/stevenvachon/handlebars-
react](https://github.com/stevenvachon/handlebars-react))

Almost everyone chooses to use JSX. The docs use JSX. Tutorials across the
internet use JSX. It's the accepted approach. But, it's not _required_. You do
not _need_ it. There are other options. It's your choice.

[0]
[https://www.reddit.com/r/javascript/comments/81fkhi/this_may...](https://www.reddit.com/r/javascript/comments/81fkhi/this_maybe_a_dumb_question_but_do_you_really_need/dv3dazy/?context=3)

