7 ms·
Using React, Firebase, and Ant Design to Quickly Prototype Web Applications
- iandanforth 9y agoIn 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 9y agoCan I eject rekit at some point? Can I use VS Code before ejecting?
- iandanforth 9y agoThe 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.
- nbrempel 9y agoThis looks neat. I’ll take a look, thanks!
- icemelt8 9y agoNice I like it.
- MWil 9y agoWes 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!
- PunchTornado 9y agoShouldn't a deletefacebook involve stopreact? surprized to see react articles on hn now...
- TheAceOfHearts 9y agoReact 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 9y agoaren't there actually a lot of issues with the license? and seeing that you can't trust fb..
- TheAceOfHearts 9y agoThere were many concerns and the license was updated to MIT. I haven't heard of any issues rising from the new license.
- ambewas 9y agoI 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
- rglover 9y agoCan you elaborate for me? Curious what you'd like to see in respect to a design system... Side note, this is what I'm looking to solve at https://cleverbeagle.com https://cleverbeagle.com.
- ambewas 9y agoWhat I would love to see in a design system is something in terms of "white-label" components. I'm talking about components with great UX, but basically no styling applied. I'm not sure if what I'm talking about is possible, and I'm not sure what it would look like -- but I'd love a framework that just makes everything work really nice - except it doesn't force you to do really quirky css hacks to re-style the thing. If that makes any sense :)
- RickS 9y agoAgreed. I'm surprised not to have seen this. It reminds me of the "skeleton" wordpress themes from ~10 years ago. You get a view layer that's marked up and connected/connectable, but that has no styles.
- projectramo 9y agoCan't you change the style of a Bootstrap layout without changing the functionality? I thought that is the point of all the different "themes" they have.
- ambewas 9y agoEver taken a look at how bootstrap's CSS is written? It's horrible and even worse when you start to try to override certain things :(
- ConfusedDog 9y agoInitial 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...
- deleted 9y ago[deleted]
- gschier 9y agoMaybe they're being blocked for some reason? Everything looks good for me (in Canada)
- tootie 9y ago"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 9y ago“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/
- gschier 9y agoIt seems like Firestore is meant to replace their old realtime DB eventually. They have a good comparison page on them: https://firebase.google.com/docs/database/rtdb-vs-firestore https://firebase.google.com/docs/database/rtdb-vs-firestore
- viggity 9y agofrom 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?
- 52-6F-62 9y agoenterprise. In all seriousness, this is the crap that many company types buy. What they won't be is an easy and straightforward explanation of what it actually is. You want extra points in a meeting? Just tell them you're integrating that quote for increased utilization of all structured experience parameters. 99.4% utilization. And you think next quarter you can get that up to 99.6% — and of course, something about how it's free. They already know they don't fully understand, and they don't want to be reminded. what they want is to feel they're speaking the same language. It's crap, but its necessary in industries that aren't necessarily that involved in the tech or design.
- bbaumgar 9y agoThis 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.
- deleted 9y ago[deleted]
- tlarkworthy 9y agoI 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 9y agoThanks for the feedback. I’ve been thinking about writing a guide on deploying Firebase apps to production, I can include it there.
- Mc_Big_G 9y agoI 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 9y agoThis 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 9y agoI'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 9y agoI 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_maybe_a_dumb_question_but_do_you_really_need/dv3dazy/?context=3 https://www.reddit.com/r/javascript/comments/81fkhi/this_may...
- realPubkey 9y agoThere is also a way to use a reactive database without having to trust google by using couchdb+rxdb.
- nbrempel 9y agoNice, I’ll have to give that a try. The Firestore API seemed quite similar to MongoDB which I haven’t used in a number of years. I might give that another try as well.
- ravenstine 9y agoI'm constantly shocked by how few people know about CouchDB or PouchDB. Both are amazing projects that integrate perfectly.
- gschier 9y agoI 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.
- projectramo 9y agoNice. Please do VueJS next.