I'm starting a large scale app and need advise on setting up the folder structure and all. So I'm not sure if on Meteor startup if it loads all of the components to one file or not ( if all the components are in the client/ folder )
If it does not load all the components and send it to the client initially the this question has been answered. if Meteor do send all the components to the browser then need a way to fix it.
At the moment I have like 70 components and do not wanna send all of this to the user on the initial page load.
It seems as though incremental/on-demand loading for components is in the 'todo'/'future feature' stage.
From - Trello: Meteor Roadmap
Right now, on initial pageload, you download all of the JavaScript,
templates, and css in the app.
This task is to make it so that you download just the parts that you
need. You might download additional parts in the background, or
on-demand as you navigate through the app. (To be clear, this would
apply to the JavaScript, CSS, and templates, not to database contents,
which would continue to be handled by the subscription system.)
It should be possible to secure some of the additional parts so that
only certain users can download them. For example, only admin users
could download the JavaScript and templates for the admin console.
Related: when the app is updated, only download the changed parts, not
the whole app.
Related
I am developing an admin dashboard where I want to have a files navigation system that shall be always available from the main admin area and stay independently loaded from the main admin area.
What's the problem?
While interacting with the dashboard, since the approach is SSR with PHP, the user will be executing page requests to update a post, go to a different view, etc. So the files navigation area will have to be reloaded on every request and I don't want that, since the backend PHP will have to fetch all files and build the files tree over and over again for each request.
I though about doing the following:
The wrapper page (admin dashboard) contains two iframes in a split viewport:
iframe MAIN
iframe FILE-NAVIGATOR
The user can use and navigate on each side of the viewport without affecting the other area.
For example, navigate through files and folders without moving away from an open editor on the main iframe.
Or save the editor contents and go do something else without having to constantly refresh and re-render the files navigation area.
Both iframe contents will be hosted under the same domain, so communication between them won't be an issue.
I want to go the SSR route via PHP, since this project does not deserve the effort of building a modern SPA and I need to reuse a lot of already existing PHP code.
But still, I want to do it as good as possible.
So the question is:
Do you know if there is a cleaner/better way to achieve this, better than iframes?
I am a bit worried about all browsers supporting iframes since it's in fact an old thing.
I think your best bet would be to go with a single page application; like React or Angular. This would somehow force you to build your backend system as an API server and letting most of the heavy UI lifting to JavaScript running in the client.
Some time ago I started working on a side project that would be an Amazon S3 Browser. The application runs in the browser, the main entrypoint is here but you'd be interested in looking at the Browser part itself.
You'll notice the BucketBrowser component accessible here is composed of 2 parts: the BucketList and the BucketContent, similarly to what you want to achieve.
The main advantage of working it as React (or Angular) and a neat Backend API is the separation of concerns and the opportunity to create also a Mobile or native client for other platforms that would leverage your Backend API.
I'm not a React expert, the links I've shared are part of an experiment not ready for production usage; but will help you visualize how you could achieve your idea by leveraging React.
Use SingleSPA https://single-spa.js.org/ framework and create Container app using React. Then keep your PhP code as it is and display it as child page inside Container app page. All new modules you can create as separate module. It is kind of FE microservices. We tried it using React and Vue js but I am sure it will work for PHP too.
You can open your admin releated stuff on own workspace = virtual desktop
Thats supported on Linux, on Window and perhaps on other OS too
The follow some hints how to to some thing on Linux:
Check how many workspaces are configured on your system:
wmctrl -d
You can set a different count of workspaces if you like:
wmctrl -d | wc -l
# or on follow way:
wmctrl -n 1
Open a program in foreground on current active workspace and move to 2`nd workspace:
wmctrl -s 1 ; xed & sleep 3; wmctrl -s 0;
Open a program in background on current active workspace and move to what ever your prefered workspace is:
Thats possible too.
You can display what you want on your background picture of your screen:
on Linux systems you can use p.e. Conky
Conky: http://conky.sourceforge.net/
Conky-Optionen: http://conky.sourceforge.net/config_settings.html
Conky-Variablen: http://conky.sourceforge.net/variables.html
Conky-colors: http://helmuthdu.deviantart.com/art/CONKY-COLORS-244793180?
Wettercodes: http://edg3.co.uk/snippets/weather-location-codes/germany/
https://www.linuxmintusers.de/index.php?topic=33952.0
https://www.linuxmintusers.de/index.php?topic=11139.0
on Windows systems, you can use p.e. bginfo
It can be they are like this on other OS too.
When I turn on webpack5 and call internal api(/api/*) from page after first render, the page refreshes and logs Refreshing page data due to server-side change. after refreshing once, it works fine as webpack4.
Expected Behavior
The page should not refresh on api call after first render.
I recently updated to Next JS 12 and suddenly started encountering this issue also. I'm not sure if it's necessarily related to that as I believe Next JS 11 was also using Webpack 5 for HMR, but they certainly switched over to socket communication for hot reloading, rather than server sent events as they had with previous versions. [https://nextjs.org/docs/upgrading#nextjs-hmr-connection-now-uses-a-websocket]
I have a file /inc/paths.js where I am organizing and exporting URI path string variables for different resources in my app. There were a number of paths in that module which were also being utilized by parts of my /api scripts, namely object keys for AWS S3 bucket paths. So, this module was being imported by not only React components in the /pages directory and elsewhere, but also to the modules in the /api directory. By moving all the variables used by the /api modules into their own file and making sure that none of those variables are imported by React components or pages, the error seems to have disappeared for me.
This may be related to this quote from Vercel:
Finally, if you edit a file that's imported by files outside of the
React tree, Fast Refresh will fall back to doing a full reload. You
might have a file which renders a React component but also exports a
value that is imported by a non-React component. For example, maybe
your component also exports a constant, and a non-React utility file
imports it. In that case, consider migrating the constant to a
separate file and importing it into both files. This will re-enable
Fast Refresh to work. Other cases can usually be solved in a similar
way.
https://nextjs.org/docs/basic-features/fast-refresh
Although the logic doesn't quite match up, it leads me to believe there is something occurring along those lines.
I updated next.js due to the console warning I get whenever next.js run, telling me its using using weppack 4 instead of 5
You can still use webpack 4 by changing it from your next config as it's an update issue
On the client page, I changed to call the internal API by useEffect() hook to fetch data, instead of triggering the data-fetch function by onclick. I found the issue was gone.
I am working on an shopify app, I am using the shopify app CLI as recommended by Shopify to create and serve the app. What I am finding is page sizes for each Page is too high. I am attaching a screenshot for reference.
This is highly annoying and is making the development very slow. Is this expected, am I missing something, are there any configurations that should be updated.
Continuing further investigation, I created a simple node app from shopify cli, no personal code added, just plain barebone app created by shopify cli, on serving this app in my dev store, I still get heavy page sizes causing time delay to load page (page size is bloated up time to render this empty page is 40~secs and page size is 5.78mb)
There is no documentation on any configuration changes that we need to tweek.
I downloaded these heavy page files to check what is in it, the webpack is somehow bundling all my components in my app js and index js files (repeatedly), its bundling all this unnecessary files causing each page file to bloat up, it would be really helpful if someone from shopify or may be nextjs can point out the configurations I need to update, to change this behaviour.
I'd like to use Next.js static site export, but I'd also like to have dynamic components within the templates so that a build wouldn't need to be done every time they change, for example, a 'navigation' component. From what I've read this doesn't seem possible? Are there any workarounds, aside from creating a separate client-side build step?
Next is working on allowing for a combined static + SSR generated site, but they're not there yet. I see a few options currently:
You can export a static site, but have that static site make api calls, etc. So you can load your navigation or whatever via api calls. Benefit - no new build. Drawback - those links/that markup is not available to search engines and won't appear initially for users.
If you're using a CMS and CI system (eg, WordPress for content, Travis for CI), you can set up webhooks or functions in WordPress to fire and trigger a rebuild & deploy in Travis when your content changes.
Go full SSR. It still delivers a fully rendered "static" page to the browser, it's just not a static HTML file at build time but one at run time. This is your best option if you need to have your dynamic content rendered immediately for the user and don't want to build with every change.
I made an ASP.NET MVC application which allows user to create dynamic websites. I need to add feature which will allow to download from server off-line version of choosen website as static html files with menu, hyperlinks, images, documents etc. It should work similar to applications such as Teleport Pro, but I have to choose from Admin Panel which content should be export.
Client wants to burn static website on CD, save on pendrive.
Do you have any ideas how to begin? Please help.
I currently have implemented that in a current project...
User is able to change anything in the frontend and at the end he can publish and download the offline files... the site subscribe users and show all prizes, winners and more information about that campaign.
All was done in ASP.NET MVC3 under .NET4 and hosted in AppHarbor.
It's composed at several applications but for what you want, you develop the Backend and the Frontend, and to generate the static files, simple use the Frontend to grab the full HTML
As an example, I can show what 2 users did...
Callme.dk did http://callme.julekal.info and
Sony Nordic did http://sony.julekal.info
plus, you can simply point custom domains to it as well like http://sonynordicxmas.net/
To publish and generate all files:
one part of the editing:
So I give the users, offline access (through the .zip file), online access (through the frontend application) and the ability of using custom domains...
I think the only way this might be possible is if you go to every single page and then use your browser to "Save" the web page script and all.
However this causes several issues;
You never quite get everything and you need to massage the HTML produced, dowload all the images etc to get the page to look right
Each html file now has an associated folder with the same name and each time you do this you will get another html file with a folder. You can combine all the folders into a single one but that leads me to item 3.
You will need to edit each html file to clear up any pathing issues if you want to share a single source folder.
Data is no longer dynamic!
You need to, if you want to link all the pages to each other, edit every single html file and resolver the anchor tags.
This is too much work and I think it actually breaks the true requirement.
Don't do it! :)