Multiple Javascript Framework on a single application - javascript

I have a project handling in which already built most of its features and uses laravel and knockout js. But I want to use Vuejs on this one because I dont know yet about knockout and I like vuejs. My concern is, is it possible that I can use both witout conflicting, or im thinking to use vue for specific part of the applicaiton like, live web alerts.
please let me know the pros and cons about this, thank you.

Related

Angular 7 configuration or alternatives?

I have been struggling with how to implement Angular 7 into my .NET Core 2.X project keeping the best of both frameworks without success. The main problem that I am facing is that Angular wants to control my frontend and how it receives it. By this I mean it forces you to use static templates for everything, I get the concept but for my project, this is going to generate an insane amount of templates/components or templates with a bunch of unused display elements. It makes much much more sense to have more of a generic frontend component that receives the templates from the server then handle all the binding, DI, updates etc.
I have looked at several options and questions about Dynamic Components, Dynamic TemplateURL's, Custom Elements and lots of other topics. But the problem I see with most of these answers is that none of them actually have a dynamic template, they might use Dynamic Components but the actual loaded control still has a static template in the end.
This question seems to be pointed to most
I did run across a solution that seemed to be an option but then I realized that it had to be run with the JIT Compiler. That again adds unnecessary load on the client when everything could be compiled ahead of time.
There was also one about using Angular Elements but this has its own problems apparently and really doesn't fix the issues without allot of rewiring or other workarounds to keep everything working.
The Dynamic Component Loader sounded very promising, From the Angular site it states
Component templates are not always fixed. An application may need to
load new components at runtime.
That implies that the templates may be set dynamically but at the same time, it implies that loading a new component at runtime will fix that. But the component loaded has a static template. Nowhere is the template generated or changed, or am I simply missing something?
I have looked at Angular SSR and that almost handles it but I can't seem to figure out how to go through the Controller or otherwise utilize any of the benefits of .NET Core/ASP.NET or dynamic server-generated content. It seems to just offload the compiling from the client onto the server but still uses the same static templates. Is there a way of using Node.js to render a MVC Route then send the module?
There used to be a way to set the TemplateUrl of the Component to a Route on the Server but that is now not allowed, making a lot of the answers I have found obsolete but the exact way I would like to set this up.
The only real option I have been able to figure out is using MVC to generate Dynamic Modules/Components then load them in the Angular App. Would it be feasible to compile the .cshtml view via a controller to create an HTML string that is then used to Compile an Angular Module/Component then send that out to the Client and load it into the Angular App?
I understand how to compile my View into an html string but I am not sure how to go about Compiling the Angular Module or even if this is the right idea or if there is a better way of handling this?
It seems to me that this should be a fairly easy thing to do, all the tools seem to be there but not sure how to get things working right.
I recently started with Angular (After working with .net, jquery, javascript, react) and my first interaction is directly with angular 7. The first thing I noticed was how quickly I can develop in angular, but there are a lot of files which I am not even sure about, however are generated compare to react, but the learning curve was higher in react then in Angular definitely.
If you need something really lightweight, you should definitely go for libraries then framework. react is a good option, however it's not MVC driven and you will find it very different then Angular (I am realizing it from sometime).
Other than that, if most of my code is static, I could have chosen some kind of HTML template frameworks (i.e, nunjucks) which can be pre-compiled.
For components created in .net, I don't think that is possible to have them pre-compiled in angular, as you will only create something in .net if you need those component having dynamic data.

angular vs vanilla javascript vs jquery, should I use only one of them?

I did all my javascript on front-end in angular.
My app is not single page application.
I do not have any routing. I just needed something so my user interaction does not depend on ids or class names of html elements.
With this approach I do not depend on html/css coders. They can do what ever they want without making impact on my javascript logic. But some part of my project I have to do something like this:
var pos = $(".two").find(".active")[0].offsetLeft;
$(".two").scrollLeft(pos - 40);
Even that is only two lines of code I am hating that solution because I depend of some elements with class names .two and .active.
I am not asking how can I do that two lines in agular but wondering if
there is some framework or javascript lib that can deal with stuff similar to angular:
Directives
Services
Factories
Filters
Most of my, lets say user interaction is done via directives. Most of my logic for example google maps are done via angular directives and angular factories. All of my filters (for example format date is done via angular filters). And at the end all of my ajax calls are done via angular services.
With this approach I have solved major problem and that is code usability (sort of modular approach) then I solved big issue with maintaining code. Anyone can work on this project after me without having to scratch his head for two months in javascript code.
I am having but one issue and that directives are slower then if they are written as pure javascript. When I say slower I mean there is some strange timeout (like 200ms) when html is rendering via directive.
Anyway I would really appreciate some input regarding angular vs plain javascript or jquery, should I mix it or should i do my javascript in angular (or some other framework) only.
Thanks.
I just recommend you try vue.js ,maybe you can check the comparison between react,angular and vue in https://www.awesomes.cn/vs/10-65-447

Converting a part of web application built with Javascript/Jquery to Angular 2

We would like to upgrade the web application built with Java script and Jquery to Angular 2. The application is huge and we cannot convert it at one shot, so we would like to convert it in a step by step basis. I have a couple of questions
What are options to convert a small part of web application to Angular 2.
From the current web application(built with simple java script / jquery) we would like to have a link that would open a modal window built in Angular 2. The modal window will have a series of screens to capture user input. We just want to create this part alone in Angular 2 as a first step. Is this possible?
There is a big difference between jQuery and Angular2. jQuery is a library to mainly manipulate the DOM. Whereas Angular2 is a complete framework. When I say complete framework, it has features like routing. So it is easy to build single page application with Angular2 without much external dependency.
To move to Angular2 you might need changes in the server-side also, like exposing APIs, the build system to support Angular2.
So instead of moving a modal window to angular2, a better option might to go with a microframework based approach, were you identify a small independent set of functionalities(module) and move it to Angular2
AngularJS can be used in small parts of your main application. No problems there. You can write your modal logic using angular and you will be fine. You can always add new features in your app using angular, going forward.
However when you say you want to upgrade your existing code, more factors will come into play and a lot will depend on the existing architecture of your app.
The most significant difference is that most jQuery apps works around DOM manipulation. The code you write for jQuery is always trying to manipulate your DOM.
But in angular this process works differently. If you code correctly you will rarely need to manipulate DOM in your angular project.
So I would not recommend to go for a partial upgrade where you have to mess with your application's architecture. But certainly you can build new features using Angular.

AngularJS and jQuery... What's wrong with using both?

I saw a few blog articles saying that AngularJS and jQuery could be used together in one app. That seems good as jQuery has some functionalities Angular doesn't have and Angular allows us to make a greatly structured logic for a web app.
The fact is, as I'm french I also take a look at french blog articles about that, and french tends to say that we should never use jQuery and Angular together. I asked why on a forum and people said that it's probably because beginners usually use jQuery and Angular for the same things : adding elements dynamically, use ajax requests, etc... But I'd like to use jQuery for some things Angular does not do and to allow bootstrap js to work on my app.
What do you think, are jQuery and Angular bad at working together in one single app? Or does it just depend on how we make them work together?
AngularJS uses JQuery itself, the major reason not to mix and match is just what you described of them stepping on each other's toes.
While I was learning Angular a lot of the time I would end up using JQuery alongside it because I didn't understand Angular or know it's full capabilities. After learning it better my code has continuously less JQuery in it, but if I can't figure it out in angular, I'll make sure it works with JQuery until I can get it.
I guess it depends on what you're aiming for. If you want to develop an Angular app, then Angular already includes a version of jQuery called jQlite, but you can still use jQuery in your Angular app if you want to.
You can actually "wrap" jQuery code into custom Angular directives, which is pretty sweet.
In an Angular app it's safe to include jQuery if you want to implement some Bootstrap functionality. Currently, I'm doing that to implement Bootstrap's collapse component. I have only just begun developing in Angular, so I am not an expert as to all the ins-and-outs of using jQuery with Angular.

reactJS with jQuery or JS

I'm pretty new to ReactJS and a bit confused on how to use it. I understand the basics but when I want to build more complex things, I tend to start thinking in jQuery or JavaScript. For instance if I want to build a web app that print letters from a string on page load, I know how to do it in jQuery but I have no idea how to create it with React. And the tutorials covers only the basics. So my question is, how can I learn to use React in more complex ways? Is it possible to use jQuery or JS in React?
Basic js is easy obviously, but plugin use is documented here: https://facebook.github.io/react/docs/working-with-the-browser.html

Categories