search

foursquare / fsq-studio-sdk-examples

Foursquare Studio is a platform to visualize, unify, enrich, and analyze spatial data on a planetary scale.
https://studio.foursquare.com
MIT License
20 stars 12 forks source link

Use Vite in the React example #57

Closed abstractalgo closed 1 year ago

abstractalgo commented 1 year ago

Context

Recently, the new React documentation became available (blog post), and the new docs don't recommend using create-react-app anymore (see https://github.com/reactjs/react.dev/pull/5487 for a full discussion and reasoning).

Also, create-react-app is not actively maintained anymore (the last release was ~1 year ago at the time of writing this).

To bootstrap React applications, the community often turns to Vite, so this PR has done just that.

Description

There are no functional or stylistic changes to the demo itself, the only changes are around tooling.

Future work

And while the React documentation favors developing full-stack React apps instead of client-only apps (see https://github.com/reactjs/react.dev/pull/5487#issuecomment-1474435706), that's not always possible, nor always desired. In fact, that opens an opportunity of creating a similar, full-stack example of using the SDK, with something like Next.js. Having two examples (one React and one Next.js e.g.), would enable a natural way to show the differences between the client-only and the full-stack applications (if there are any) and provide more possible entry points for people consuming these docs and examples.

This PR avoided bumping the React major (from 17 to 18) and the SDK minor (1.1 to 1.6), as that wasn't the primary focus of the change but still should be considered for future work on these examples.

ibgreen commented 1 year ago

@abstractalgo This looks awesome. Yes we should go through all our examples and make sure they work with latest versions of libraries, tooling etc.

I added a couple of React experts as reviewers.

I like you idea for a Next.js example, is there any good environment like codepen that can demo SSR app in action? you may want to chat with @ilyabo who has a lot of experience with next.js and similar environments.

abstractalgo commented 1 year ago

Yes we should go through all our examples and make sure they work with latest versions of libraries, tooling etc.

Definitely a thing to consider and see what could be improved!

is there any good environment like codepen that can demo SSR app in action

I was thinking that adding either CodeSandbox or StackBlitz demos (as external links from docs pages e.g.) could be an interesting addition, together with playground examples (e.g. filters), both great at offering to get a quick understanding of the expected outcomes and possibilities.

Perhaps an even more interesting is the possibility of using StackBlitz's WebContainers or CodeSandbox's Nodebox+Sandpack, to build live, editable, completely self-hosted examples (in whichever framework!), which can open some very, very interesting opportunities. For example, Svelte docs use WebContainers and have live examples and docs side by side.

I'm happy to learn more about what other ideas you folks had over time and discuss different approaches!

ilyabo commented 1 year ago

I agree both CodeSandbox and StackBlitz are great options. I haven't used WebContainers, but looks pretty awesome. Would be cool if it we could build an interactive demo of the SDK with it.

A full-stack demo app could I guess load some data from a database and maybe run parameterized queries. For that, Next.js would be a good option indeed.

abstractalgo commented 1 year ago

...is there any good environment like codepen...

Also, I didn't realize sooner that the currently open PRs go in the direction of using Codepen (#54, #49), and that's what motivated the initial mention of Codepen specifically.

With something like StackBlitz/CodeSandbox, it can be simplified even further - they can provide a fully-fledged example and dev env, and code versioning can still be kept here on Github without any code duplication or special setup because those envs, compared to Codepen, support multi-file projects with complex setups.

Here are example one-liners that work today already:

Would be cool if it we could build an interactive demo of the SDK with it.

Would be an interesting thing to try out, indeed; as the setup for using WebContainers is very minimal.

ibgreen commented 1 year ago

Yes one of the problems with such sandboxes is maintenance of the uploaded code. If we can keep all the code in our repo, and populate the sandboxes from that code it is better.

vscode has a number of interesting integrations that we might also be able to leverage.