alecadub
commented
4 years ago Two popular ones for react that I know of :
React bootstrap: https://react-bootstrap.github.io/
Material UI: https://material-ui.com/
Closed alexstojda closed 4 years ago
alecadub
commented
4 years ago Two popular ones for react that I know of :
React bootstrap: https://react-bootstrap.github.io/
Material UI: https://material-ui.com/
Alex-Hayeur
commented
4 years ago I agree with the strengths of using JetStream combined with Inertia. Heavy focus on making a single-paged app will make for an easier and more user-friendly front end and allow more time for additional features and easier integrations.
However, does Inertia also work with React, or only Vue? It might be best to confirm which of these two the team is more familiar with and using that, though I'm not familiar enough to Vue to know if it has unique and helpful application here.
a-drew
commented
4 years ago I agree with the strengths of using JetStream combined with Inertia. Heavy focus on making a single-paged app will make for an easier and more user-friendly front end and allow more time for additional features and easier integrations.
However, does Inertia also work with React, or only Vue? It might be best to confirm which of these two the team is more familiar with and using that, though I'm not familiar enough to Vue to know if it has unique and helpful application here.
Good question!! Inertia does indeed have a React adapter. However Jetstream's Inertia components were built up with Vue.js. I do believe vue is very easy to pick up, even more so if you're familiar with the way react works. To me the only difference is syntax.
Alex-Hayeur
commented
4 years ago Good question!! Inertia does indeed have a React adapter. However Jetstream's Inertia components were built up with Vue.js. I do believe vue is very easy to pick up, even more so if you're familiar with the way react works. To me the only difference is syntax.
Okay that makes a lot of sense, thanks for answering. It would probably end up taking more time and effort properly building everything in react than it would take to adapt to using vue.
jonathanp16
commented
4 years ago Good question!! Inertia does indeed have a React adapter. However Jetstream's Inertia components were built up with Vue.js. I do believe vue is very easy to pick up, even more so if you're familiar with the way react works. To me the only difference is syntax.
Okay that makes a lot of sense, thanks for answering. It would probably end up taking more time and effort properly building everything in react than it would take to adapt to using vue.
I am personally pretty experienced with Vuejs and I can second @WindOfRussia in saying that it is very easy to pickup, and they have some great documentation. Also yes, it would be extremely difficult using React, from a compatibility point of view as opposed to sticking with Vue.
Challenge
We need a UI component library (Such as Bootstrap, Jetstream, etc) in order to build out the UI with a uniform look and feel.
Timebox
This experiment is limited to 1 day
Findings
CSS
Bootstrap: One of the most ubiquitous css frameworks available. Very generic but has a huge community so there will be lots of examples. Themes can be used (or created) to tweak the look and feel. The biggest con is it still relies on jquery for interactivity. https://getbootstrap.com/docs/4.5/examples/
Bulma: Solid component library with an easy syntax. Relies on css grid and flexbox so it's very responsive (mobile, tablet, etc.) One of the biggest pluses are the css helpers it comes with, tons of easy-to-understand modifiers for your classes. Absolutely on JS required to run anything so it'll be very lightweight. https://bulma.io/documentation/components/
Tailwind CSS: This one is a little different, instead of pre-built components tailwind is a utility css framework. This means we have complete control of the design without ever leaving HTML, no. No more need to battle framework specificities or have to override the css / sass of our chosen framework. While Tailwind CSS ins't a component library by itself, they have since built up a library of example components at https://tailwindui.com/components we could use to jump start our project.
JS Libraries
These are frameworks that allow you to build ui, and whatever interactivity it needs to have, into small reusable components. A much better approach than simply relying on blade with a css framework and using class tags. Y'all already know the main contenders here so no point in explaining these in detail.
React: A bit more robust, usually used with typescript. Bigger community, more examples.
Vue: A little bit more lightweight. Can be adopted slowly, start off with just component usage but can scale all the way to SPA. The newest version supports typescript as well.
Angular: Google killed it... No one really used it with laravel anyway.
Laravel Specific Scaffolding
Jetstream: One of the new updates coming with laravel 8, Jetstream is a ready to use dashboard scaffolding including a user login, registration, api tokens, two-factor, session and teams management. We can rely on these basic features and build on top of them. Jetstream has two possible stacks: Livewire or Inertia.
Laravel UI: The basic laravel auth scaffolding comes with. Built on top of bootstrap with either React or Vue. Has since been deprecated in favor of jetstream but still a decent starting point. Comes with basic register & login pages.
Laravel Nova : Nova is a paid single page admin dashboard that makes it extremely easy to manipulate your laravel models. It's very convenient to use as a developer due to its abstraction of all things CRUD. It can perform the role of a basic CMS but anything further would require custom components ( fields, tools, etc.) that can be built in Vue.
add more??
Server Driven Single Page Apps
Both of the options below improve communication between back and frontend, allowing you to skip the standard boilerplate code of building an api and consuming it.
Inertia: Inertia works by replacing your view layer with javascript components instead of blade / twig / etc. It has various adapters allowing you to mix and match frameworks together: React / Vue with Laravel / Rails and many more community adapters. This affords you the convenience of a single page app with none of the hassle of API scaffolding or integration.
Livewire: Following this same logic, Livewire replaces cumbersome form submissions and ajax back-and-forth with reactive blade components. This means you get all the comfort of single page applications without ever leaving PHP-land. If you like blade, basic html, and a css framework this will work for you. One important note is that Livewire SEO friendly as opposed to any JS driven approach, however, this isn't much of a benefit for our application.
Recommendations
I think it would be best to stick to the official Jetstream package. It is currently the recommended way to jumpstart your laravel application. All the assets can be published and modified as we wish. On the backend, it promotes the use of single action controllers. Jetstream allows for either Livewire or Inertia stack and is built up using Tailwind CSS. Between these two, I believe we would be better off working with Inertia/Vue. It is more flexible, will let us rely on any extra Vue.js component libraries we want or we can build them on our own by using bits and pieces from Tailwind CSS / UI.
Some Resources