I have 2 existing projects that are independent of each other, and I was tasked to bring them together under a suite of some sort and share some small data between them. The problem is one platform is using ReactJs and the other using VueJs.
Example:
To give you a small example, it's like having Facebook and Instagram using different JS frameworks, and bringing them together under one platform let's call it Meta so the user goes to one platform and finds all products that the company offers.
(Example of the data that needs to be shared: Dark/Light Mode, User is logged, ....)
And is it possible to wrap both apps inside another, like having a whole new project consisting of a Navbar and a body, and the body switches between showing the first and the second platform using the navbar links?
Please if you have any suggestions throw them at me.
Related
How can I deploy secondary "partial" React Apps using a subset of the same files?
A bit of background:
We have a fairly large React web app (around 75 primary pages/views, along with tons of modals, dynamic content, etc.) with about 5MB of JavaScript once it's been bundled for production.
It works well in normal browsers. But we also display certain views on TV screens, and have it cycling through several views - in a case like this, the "digital signage computer" - in some cases the onboard CPU/browser on a smart TV) is loading a "cycle screen", along with perhaps 4 pages contained in iFrames. (Complex setup, but we want the pages rotating in a few second interval, while only querying the database for updates every 10 minutes or so, and this achieves that.)
However, from my understanding, this means the Smart TV is having to load ~ 25MB of code (might be cached so not have to download it all 5 times, and very little of it is getting rendered, but still has to process it individually.) And occasionally, it appears that the TV gets overwhelmed while rendering and just displays a blank page.
I'm thinking perhaps there is a good a way to create lightweight secondary apps with just those pages (and associated provider contexts), so that these views could be trimmed down to < 1MB each.
But I don't want to maintain separate page/view files in different codebases, with different deployment processes, etc.
Is there a good method to do this? Where you can specify sub-apps which get separately bundled, and then where going to a certain route (e.g. server/subapp1) will only load that page's worth of code, while it's predominately the same code?
I did look through the similar questions and found this one, but the answer there isn't, at least by itself, dynamic enough for my needs.
Similar to that question, I am attempting to put together a multi-tenant application with a different skin per property. However, the answer given in the above question assumes that the various skin resources can be hard-coded into the application. That would be fine if we were talking about 2 or 3 skins, but my application will need to support dozens at launch and probably tens of thousands in its lifetime (each property can create multiple skins for different campaigns).
I have an API where I can request the skin, which is currently a long string of HTML with a token embedded indicating where the application contents should be rendered into the skin (e.g. {{body}}).
One of the things I'll need to do is inject some <link> tags into the <Head> element to pull in some external CSS. If React.Fragment supports attributes (like __dangerouslySetInnerHTML), I haven't been able to figure out how. If it's possible, that might be one way.
I'll run into the same problem when I want to inject some pre-application and post-application content into the body of the page, too.
Since I want the skin to be rendered server-side on the first request and then be static until the tab is closed, it makes sense to do this in pages/_document.js. After that, I'm kind of lost for what to do next. Parsing the string that contains the skin content is easy enough, but how do I intermingle that raw HTML with React components?
Hi I need your help trying to figure it out something.
First a little background, I was used to code in Django, it was fast to code and good, but times change and Node is taking over most of new apps, then I move to Express a couple of years ago, however I still miss a lot of the Django functionality, then I start coding a little library to help me with common tasks, then start growing until the current point where you have a core library and plug-able “apps” to do recurrent tasks, like notifications, auth and more, or at least that’s the plan.
Right now an app works something like this:
./controllers (All renders)
./endpoints (Restfull API endpoints)
./models (Static and DB models)
./public (Public files)
./style (Scss styles with bootstrap injected)
./views (Default templates, distributed with the app as example, loaded by default)
…/…/views (Custom views to rewrite the default ones from the app)
On start, JSloth compile everything for you and run the server (hot reload included):
Now, that works fine using an static multipage environment, but I will love to use Angular for that, changes will be needed but I want you guys to lead me in the right direction.
So far I have 2 ideas:
1- Split Routes/Html apps and Restful/Endpoints, then basically use an standard set up on that kind of apps with webpack and AngularSSR.
The big downside is, you can’t give an out the box frontend implementation for apps.
2- Figure it out a way to provide an Angular app for each JSloth app, in this way if you install/copy the auth app you will be provided of user lists, interfaces to update your profile, etc.
I’m thinking that may be a problem talking about performance because in this way you will have a lot of Angular apps, am I wrong?
I need a easy way to allow the final user to share footers and headers at least, maybe even styles or scss variables for colors, in that way it will not look like a huge change.
Do you have any other option? Any better idea?
Thank you so much for the help, this is the repository: https://github.com/chrissmejia/JSloth
Edit 1: Forgot to add the models folder
Anyone seen an android app created with App Inventor that is a catalog?
I want to create app with a static DB, when a user selects a number it will display the item name, details about the item and image of that item.
I suggest this easy way if you're a beginner at programming in general and you know a bit of HTML and Javascript.
Have your database in JSON, most database management systems will export your tables in JSON format.
And here is how to insert your javascript in App inventor
http://puravidaapps.com/javascript.php
Using a javascript library will make the process even easier.
Let me suggest to store your data in a csv file. Just add it as asset into your project and import it using the File component. Your catalog could be displayed using a listpicker component.
Start doing the tutorials to learn the basics of App Inventor. Also take a look at How to work with Lists by Saj
How to work with Lists and Lists of lists (pdf) by appinventor.org
My suggestion would be to use a list stored in an online database like firebase or a custom tinyWebDB. That way you can change the items, their prices, descriptions without having to build the app all over again. As a bonus, you could use that database to track purchases. If by static DB you mean a database on the device like tinyDB, I would still recommend using lists because they are so easy to work with.
You could have 3 paired lists. One list could be for images, one for the description, and one for the name. Then when a user picks the item number, say 3, you display item 3 of names, item 3 of descriptions, and item 3 of images.
I'm trying to migrate all "content" pages on a website to DNN5 Pro.
So I just created all the pages in DNN, added HTML module to the ContentPane and copied and pasted the HTML content from old pages.
The problem is that most of the pages have bits of classic asp code which do some minor server-side tasks - for example, populate tables with prices fetched from DB, pre-select user's country based on his IP address, do some basic dates calculations, etc.
Obviously, this code won't work in DNN.
If I had to migrate to PHP, I'd just rewrite these bits of code from classic ASP to PHP, then assign values from PHP to smarty and then would use them in templates.
But as DNN has a completely different architecture, I can't see how similar approach can be used.
Token replacement feature in HTML module looks like what I need, but it allows to "map" only tokens provided by DNN.
So, maybe anyone had similar issue with DNN and/or knows how this should be done.
It seems like you are attempting to subvert the entire point of DotNetNuke. While certainly there are a variety of hacky ways you could try to make this work just like the php site, it's a terrible idea to do so.
Instead, you need to evaluate each of the dynamic sections of the php site and find or create a DotNetNuke module that will replicate that functionality.
To make the initial conversion quicker, you can build modules you create using simple ASP style inline scripting but you should definitely use existing modules for things like displaying data in a grid.
You could write code directly in your skin file. Do some logic like:
<%If PortalSettings.ActiveTab.TabID = 33 Then
//code here of what you want
End If%>
Where 33 is the page id for the page you want to run custom code on. There are other ways to do this like creating skin objects, or creating custom modules, but this is probably the easiest thing to do. Just write code directly in you skin. Or make a copy of your skin for each page you need to do custom code for... again, more elegant ways but this will get'er done.