Get Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Metronic vs Backpack


Hi there, I currently have an app based on backpack for laravel with Spatie for permission manager and some basic jquery for modals and dynamic pages. It is purely a CRUD based admin environment with no real public website. I was thinking of moving this to Livewire or Vue with the latest version of backpack.

I have a new project and the developer has coincidentally suggested Metronic
- Laravel backend / admin
- React front end

Looking at the demo - Metronic seems quite functional and attractive - good job on the demo.

My questions:
1) Is Metronic compatible with Backpack or are they "competitive" frameworks

2) I currently use laragon as my server and not serve as such I dont need to use NPM just composer for installs and migrations. With Metronic must I use NPM?

3) I notice additional tools are available such as Gulp, Webpack, and Yarn, are these required when using Metronic. While I am sure they are useful, I have never used them thus far I would like to make minimal changes to my "dev" world as I am just learning Laravel and JS.

4) Lastly, when using Metronic React as the frontend (for only a part of the application, the majority is through the Metronic Laravel admin panel), can the React call the Metronic/Laravel APIs directly or must they go through Nodejs because of React?

Thanks very much in advance for your assistance

Chris


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


Hello Chris,

Thank you for considering Metronic for your new project. I'll address your questions to help you make an informed decision:

1. Compatibility with Backpack: Metronic and Backpack are not directly compatible frameworks. While both provide administrative interfaces, they have different focuses. Metronic is primarily an HTML template that you can integrate with Laravel for the backend. Backpack, on the other hand, is a complete CRUD backend framework. You would need to choose between them based on your project requirements.

2. NPM Usage with Metronic: Metronic does use NPM for managing frontend assets and dependencies. While Composer is used for Laravel backend dependencies, NPM is essential for compiling and managing the frontend assets like CSS, JavaScript, and other resources.

3. Gulp, Webpack, and Yarn: In the HTML version of Metronic, Gulp and Webpack are provided for asset compilation and bundling. However, in the Laravel version, Laravel Mix (which internally uses Webpack) is used for asset compilation. You don't need to use Gulp and Yarn if you're using the Laravel version and you're comfortable with Laravel Mix for asset management.

4. Metronic React Frontend and Laravel APIs: If you're using Metronic's React frontend and want to communicate with your Laravel backend APIs, you can do so directly without necessarily involving Node.js. The choice of communication method (direct or through Node.js) depends on your application's architecture and requirements. Direct communication between React and Laravel is possible and quite common.

Ultimately, your choice between Metronic and Backpack will depend on your specific project needs. Metronic provides a stylish and feature-rich HTML template that can be integrated into a Laravel backend, while Backpack offers a more comprehensive backend framework. If your new project involves a React frontend and Laravel backend, you can build APIs in Laravel that the React frontend can consume directly.

Given your focus on the frontend with React, using Backpack might be a more suitable solution as it offers a ready-to-use backend environment. Alternatively, you can explore integrating the Metronic HTML template into your React frontend. You're encouraged to give it a try, and if it doesn't meet your needs, remember that we offer a refund policy with no questions asked.

Feel free to ask if you have any more questions or need further assistance. Good luck with your project!



Hi Fizal, thanks very much for your quick reply. I have a couple of following on questions if you dont mind.

Given your comment "Metronic is primarily an HTML template" does this imply Metronic is bypassing blade or does it leverage blade?

It is correct to assume that all the CRUD work is done using default Laravel or does Metronic have it's own tools/components for building CRUDs and migrations? Or does it integrate with another set of tools for this. In my specific case I will have students, parents, invoices & payments, classes, schedules, teaches, attendance, etc.

In relation to your comments re React and Laravel. Assuming we are using Metronic, would that be using two sets of Metronic ie one for Laravel admin UI and one for React frontend? This question is more about tech than license - the license is a small price in the scheme of things. And if so, this would suggest that it would be feasible to use backpack for the admin interfaces and Metronic for the frontend consumer UI calling the Laravel APIs. Perhaps this complicates things ...

Again thanks for your advice

Note. Give the time of day when you replied, are you based in Asia?



Hi Chris,

Regarding your first question , Metronic does not inherently leverage Blade, which is Laravel's templating engine. Metronic is primarily an HTML template designed with Bootstrap and enhanced with JavaScript for interactivity and visual effects. When integrating Metronic with Laravel, you would need to manually include the HTML structure within Blade templates. While Metronic provides the design and components, it's up to you to integrate them into Blade views.

Regarding your second question, Metronic does not have its own tools/components for building CRUDs and migrations. You can use Laravel's default tools/components for building CRUDs and migrations.

Regarding your third question, if you are using Metronic with React, you would be using two sets of Metronic - one for the Laravel admin UI and one for the React frontend. It is feasible to use Backpack for the admin interfaces and Metronic for the frontend consumer UI calling the Laravel APIs.

And yes, I am based in Asia happy

Feel free to ask any further questions you may have!

Thanks


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
buy metronic

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply