Is a good practice work Vuejs with a unique .js file (all logic there) with a cshtml? like angular 1.0.
Happen that i need mix .net core action controller with Vuejs, it is not a vuejs app, I want use vuejs as my tool to refresh the content.
I created a template that combines .NET with Vue.js. You can use it as a starting point or an example.
GitHub: https://github.com/danijelh/aspnetcore-vue-typescript-template
Related
Svelte’s JavaScript server-side rendering API is described here: https://svelte.dev/docs#run-time-server-side-component-api
However, when I do this in TypeScript, there is no method App.render().
Do I need to change rollup.config.js (e.g. compilerOptions.generate)?
Do I need two versions of this file – one for the server and one for the client?
Can anyone help? Thanks!
Svelte Server-side component API is not directly accessible via import. Instead, you need to build the production with vite options --ssr. Otherwise, you're importing the component class extended SvelteComponent and that class has no render function.
You can check out this guide for Production SSR build: Vite Server-Side Rendering.
You don't need to set up the SSR Dev server or inject /#vite/client because svelte-hmr already does the magic under the hood.
The SSR Bundle options ssr.noExternal doesn't seem to work for me. So that I need to convert all Svelte components import into static import for a production build.
The official template relies on rollup-plugin-svelte, where similar question was asked. Essentially compiling in SSR mode does not automatically generate any HTML, in fact some post processing is required. The Svelte Server-side component API can be used for that.
There are several solutions out there for SSR:
SvelteKit
Routify
ElderJS
I am exploring the development with Web Components, more specifically, it's Fast. However, it would take a long time to rebuild the project and refresh the page, then verify for the CSS modification. Is there any CSS hot reload solution for the Web components(Fast)? (I am using Webpack)
There is no out-of-box solution for HMR with Web Components in General. It really depends on how you are using Web Components. Are you relying on just Custom Elements and using CSS-in-JS with it or fully using ShadowDOM with encapsulated styles and the underlying framework to declare those styles.
You can consider building your own HMR driver. To do this, you need all the three things in order for enable HMR - the bundler (assuming Webpack already has it), the server (webpack's dev server or middleware) and your own application.
In you own application, you would add the driver as:
// RUN SOME BOOSTRAPPING CODE
// HMR interface
if (module.hot) {
// Capture hot update for a particular module
module.hot.accept("./style.css", () => {
// Logic to remove old stylesheet
});
}
If you look at the above code, you can notice that it is almost impossible to change StyleSheet if it is defined within the shadow root for each component. If you have some global CSS which gets added to top Document then it simpler to implement HMR by manipulating StyleSheet objects from the javascript. At least, you will get partial HMR. For other activities, you can fall back to automatic full page refresh.
I have a Asp.net core app (v 2.1) with a set of controllers and models. They don't change. The app uses a Razor class library (RCL1) which has all the views.
I have another Razor Class library RCL2 which has more views which I need to load. This stackoverflow question Loading Razor Class Libraries as plugins has answer to load the DLLs at the start of the app.
Can I achieve this without starting the app? I just need to drop the RCL2 and the views from it will be picked up? The controller has logic to choose the right page from the parameter being passed in the route.
We have an architecture where one big application is split into multiple Angular applications maintained by different teams with different deploy schedules.
These separate Angular applications in an ASP.NET context are deployed on a server and run as one big application.
Every application is deployed on a separate app pool and they all have the same layout and framework code.
Each application would use a bundle optimized by using the AOT compiler and a module bundler (rollup or webpack 2).
Each application would also use centralized JavaScript code which needs to be centralized in the big application (framework code). This code would also use Angular components and contain things such as a centralized layout component, multiple angular services making web API calls, etc...
So each application would use this same frameworke code.
The goal is also that when a change occurs to that framework code no single application would have to update and deploy again.
The standard way that I see is that es2015 imports are used and that a module bundler interprets the imports and only adds the necessary code into the module (tree shaking). Mostly the Angular framework stuff that you need is also included in the bundle (no use of CDN).
But in this case there are 3 parties delivering code:
Angular and other vendor code
The centralized custom-made framework code used through all applications also using Angular and also providing a bundle
The application itself providing one bundle
How would you go about to split and optimize the bundles?
Make a separate bundle with all Angular/vendor stuff that the centralized framework code and the application need to use
Angular stuff would be excluded from the main bundle
Use a CDN-like way to centralize the custom framework stuff and referencing that bundle (without angular code in the bundle)
So you would end up with something like this:
<script src="vendor-bundle.js"></script>
<script src="/central-location/frameworking-bundle.js"></script>
<script src="app-bundle.js">/script>;
What is the best approach in this specific case? I cannot find good examples for this kind of architecture setup.
Just use this kind of construction:
<script src="vendor-bundle.js"></script>
<script src="/central-location/frameworking-bundle.js"></script>
<script src="app-bundle.js">/script>;
And use eTags/last modified caching on the frameworking-bundle.js
This way the file is downloaded again if modified.
Users will always get latest version without using versions/hashing/query string. It won't have to do modifications to the code.
https://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/
The frameworking code should exclude the vendor code and the application should define it. In the same way that for example Kendo requires you to have JQuery.
I made a simple REST API bundle with Symfony 2 and now i want to use ember.js as a client.
I made a new bundle for it (ClientBundle). Where should i put the js files? Into
the ClientBundle/Resources folder under public/js?
app/web under public folder
somewhere else
what is the best practice / your favourite folder structure?
The best practice is to put the client code into a separate repository and use JS specific tools for its development.
Just because you can put them into a single repository doesn't mean you should. Imagine what a mess that repository will become if/when you add other clients like Android, iOS, and so on.
We put the client JS under Bundle/Resources/public/ and have a separate frontend and backend bundle. We just published a sample distro to show how this is organized here:
https://github.com/ucsf-ckm/symfony-emberjs-edition
Currently the answer would be to store the assets in the /web directory. Source
If you intend the ClientBundle to be reusable across different projects you may have, you are best served by placing the files into the ClientBundle\Resources\public\js folder.