I am currently working on a project in which we are having a React/Flux UI being developed for us. I am being told that the UI code needs to be converted into GSPs and put into a Grails Project, to work with our backend. I feel like moving the UI into GSPs will nullify the use of our Flux implementation(Reflux).
My initial thought is that this is wrong and I have not found any use of Grails and Flux through searching.
I'm involved with a production Grails application which uses React as it's front-end. There's no need to "convert" the React/Flux code into GSP - in fact that would largely sacrifice the benefits of the React UI. There's no need- Grails is very well suited to provide a robust Restful backend to a React (or Angular, or any other JS framework) application.
Depending on your application needs, you will probably want to provide a restful API for the front-end to consume/post as needed. Use URLMappings.groovy to specify endpoints that the React app can access. You will likely choose to use JSON as the medium to send data to the React app - Grails' JSON views are a fast, flexible and straightforward means to render Grails domain objects or other data to a JSON payload.
There shouldn't be anything Grails-specifc regarding Flux - use it to manage and mutate your state in the React application, perhaps by making rest calls from your Flux dispatcher (or action creator) to the Grails backend to retrieve data and update your Flux store.
Regarding GSP, my recommendation is to simply have a barebones GSP view off your main controller, which simply loads the Javascript needed to run your React app. If you are using a module bundler like webpack, this can be as simple as linking your bundle.js file into your view and providing the root element specified in your top-level component:
<html>
<head>
<title>My App</title>
</head>
<body>
<div id="app"></div>
<asset:javascript src="bundle.js"/>
</body>
</html>
Note that for this to work, you must be outputting your webpack bundle into grails-app/assets/javascripts, which I find to be the simplest way to load the React application in a Grails app. Using this approach, there's no need to load React, Flux or other related libraries into Grails directly - just build your project using the standard JS toolchain (using npm/package.json to manage your dependencies), and process/bundle the entire application into a plain JS bundle that can be loaded by the Grails asset-pipeline.
React makes a great choice as a view-focused Javascript library that doesn't make a lot of assumptions about your backend architecture. With a solid restful api based on Grails, and some intelligent choices about tooling and project structure, React is a great fit for a modern, single-page Javascript UI in a Grails app.
Why would the use of GSP nullify the use of React or Flux? GSP is just a server-side processing language that renders HTML. Last I checked React and Flux make good use of HTML for a great number of things in combination with Javascript.
You can use them together without any issues. How, is up to you.
You are being told wrong. GSPs are Java servlets. The only reason to mix React with a server-side technology is for an isomorphic application, where you would compile your JS prior to returning/pushing it to the client. In which case, you would need to create something akin to a Rhino-based servlet. Otherwise, treat it as you would treat any other static asset.
Related
I'm rewriting some templates and functionality previously developed using AngularJS 1.x which are currently managed and developed as static assets in an ASP.NET MVC application and are used alongside razor syntax (.cshtml). There are no components either. Imagine the AngularJS modules as a huge bunch of jQuery code linked and coupled with views.
This time, I'm implementing everything we need in a Vue 3 app in a separate git repository and I'm also using Vuex 4.
I'm hoping to be able to do the following:
Build the Vue app
Load the assets in BundleConfig.cs
Link the assets to my _layout.cshtml to have them on all my pages.
Use the components wherever I need them.
I'm going well on developing the components and functionalities within its standalone project, yet I'm facing several problems and/or ambiguities.
I have pages that are mostly if not entirely rendered by the client-side. These pages may or may not be handled by a client-side router such as vue-router.
I also have pages that are mostly rendered by the server and then stuff is added or dynamic contents are loaded by the client-side. These pages can't use a client-side router.
I'm not using a router and I'm having a hard time developing and testing those pages that are mostly rendered by Vue.
if I use a router I think I won't be able to do what I'm planning to do about those pages that are mostly rendered by the server. I really need all pages (whichever kind they are) to have access to my Vuex store.
What do you recommend I do to make it easier for myself both in development and production?
Should I create several static HTML files for each of my pages in Vue's public directory tweak Webpack's configuration in order to simulate what will happen in production (use within the ASP.NET project)?
Should I start having a router, put all pages that are mostly CSR under its control, and somehow configure it to have nothing to do with my other pages that are mostly SSR?
I need to be able to debug and test stuff when I run npm run serve and then do what I'm tasked to do. Unless the whole plan is a bad/wrong idea somehow.
I might also be able to build my Vue app as a library and then, in the ASP.NET project, init a small Vue app that imports that library and that itself is bundled with the back-end project. The whole reason I'm doing this is to make the client-side stuff reusable and easy to maintain. I don't want to take a GET SHIT DONE approach.
Thanks
I've got a specific question that I'm struggling to find information online for. I've successfully installed VueJS into my Rails 6 app using webpacker and have a root component registering just fine on my application layout file:
<!-- application.html.erb -->
<!-- javascript pack tags loaded in head and my app component displays the template properly -->
<div id="vue-app-root">
<app></app>
</div>
I'm aware that in a single-page app, the VueJS app initializes a single time upon visiting the website and then async requests are made and view/template changes are initiated by VueJS - all makes sense. My question pertains to how exactly the vue app initialization should work with a multi-page app.
Does the app initialize completely on every reload/turbolink load? If I'm just using a few components here and there in various pages, am I stuck with having the entire VueJS app initialize on each page load and then, subsequently, the components? If so, should I have the Vue JS app initialize on the body tag (or a root element) within the application.html.erb or should I have the app initialize only on the pages that have components?
You need to find out what is responsible for your routing - Vue or Rails?
If it is Rails, then yes, Vue app will need to be remounted on every page load. This applies whether or not you use Turbo/Turbolinks, as long as Vue app is in the fetched partial. If the fetched partial is outside the Vue container and you use Turbo/Turbolinks, Vue app will not be reloaded. This is true even for a server rendered Vue which hydrates on client.
If it is Vue that does the routing, Rails may not do it, otherwise Vue app will always be reloaded.
To #sjaustirni's answer, I'd add that depending if you want to use Rails integrated routing or not, you may split the 2 codebases. What I mean: if you do only use Rails as an API and not it's routing, you should put the Vue project in it's own repo rather than mixing both.
Of course if you're using Rails' routing, it makes sense to keep both in the same place.
Also, I would like to share the existence of vue-turbolinks which may be useful in your case, especially if using Hotwire.
Here is a video explaining it: https://gorails.com/episodes/how-to-use-vuejs-and-turbolinks-together
I have a large rails application that I am wanting to split out into smaller applications. The one piece of this application that will be universal to all smaller applications is the mast and footer. I would like to extract the html, javascript and css for the mast and footer into it's own package that each app can load and render.
The main issue I'm running into is that the apps will likely not all be written in rails. Some will be rails, some will be expressjs, some written in Go, and some may end up being written in other languages, so my solution needs to be language agnostic.
My thought is that I can extract the html, css and javascript into it's own git repo, use mustache templates for the html, and then use grunt or a similar build tool to build a gem, a package.json structure and a golang module. Possibly each in it's own git submodule.
I'm curious if there is a more standardized way of doing this. Or if anyone knows of a simpler way of achieving this goal.
Sounds like the technology in common is HTML/JS/CSS.
Wouldn't it be better to export the mast and footer as a self contained JS library, or more precisely, as widgets?
So whatever the application server tech stack would be, you could always generate the HTML in the form of:
<script src="your_widgets.js"></script>
<script>new Footer.render('id_of_dom_element_to_render_to');</script>
By doing so, whether you want the widget library to load the template or you want to embed the template into the widget library or whether you want to simply just construct it using HTMLFragment will not be limited by the server tech choice.
i'm totally a beginner of jquery mobile, i'm wondering how does everybody build the UI?
by html markup or writing pure code?
if it's by html markup, then if i have a complex applicaiton , then i'm gonna have a very long html file with a lot of pages, how do you deal with that?
if with pure code, i don't find it easy to create widgets, the only i found it just to put the pure html code into a jquery object wrapper. it's not very object-oreinted, i want some simple ways like: var $aButton = new button( );
i had ios native app development experience, normally i write the ui with pure coding. i'm just wondering if there's way to build ui with pure code?
There's no official way to build the UI in pure code but no one stops you from writing your own "code generator".
Be warned:
Writing HTML is the easier way to do, because JQM will do all of the UI-manip.
I'm working on a UI generator for JQM which
will be released opensource. Still a lot to do but it already works more or less - see http://officejs.com
Check the erp5loader.js file which generates the whole app - there is only an empty index.html.
The factory section contains all methods necessary to generate JQM UI. The JSON files loaded show how to generate static and dynamic widgets as well as how to hook into navigation and global action bindings
Roll your own or wait until we are releasing ours :-)
I'm using the Firefox Add-On SDK to port a Chrome extension to Firefox. In Chrome, it's trivial to load third-party libraries like Underscore or Backbone. In my particular case, I'm using jQuery, Underscore and Backbone to define models that communicate with cross-domain REST APIs.
It's unclear to me how you might do something similar in Firefox. From what I can see main.js corresponds directly to Chrome's background pages, but it doesn't appear there's a way to load js files.
Am I missing something?
Add-on SDK supports CommonJS modules sysem, same modules that are also used by nodejs
https://github.com/mozilla/addon-sdk/tree/master/app-extension
Underscore has a support for commonjs module format & there for can be loaded easily
https://github.com/documentcloud/underscore/blob/master/underscore.js#L54-L65
All you need is drop underscore in next to main.js and loaded it as follows:
var _ = require("./underscore")
I do believe backbone can also be loaded in a similar way as people have being using it
on nodejs.
It's won't work for the jQuery though, that's because context where add-on SDK modules
run is different from typical web page context with DOM, which is what jQuery is designed
to work with.
Now if you want to do cross domain requests there SDK comes with a module to do that:
https://addons.mozilla.org/en-US/developers/docs/sdk/latest/packages/addon-kit/request.html
There is also another low level XHR module, that you could use instead:
https://addons.mozilla.org/en-US/developers/docs/sdk/latest/packages/api-utils/xhr.html
So if you just want to write models and talk to REST API it should be pretty trivial, I'm
not sure what's the role of jQuery in your use case. It implies DOM and UI you want to
display. If so there is several modules in SDK that would let you add custom UI for the
firefox and you can probably find useful tutorial on that subject:
https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/index.html