Our team is building a javascript library that enables other web apps in our company to consume and insert data into our app, using widgets we built with angular directives.
So we got our own app (that could be used independently), built with MVC .net (in visual studio), and with angular. And also we are producing sort of a javascript library that other apps can use and insert widgets (that are connected to data from our app through ajax calls).
We are really struggling with our deployment proccess. We need the following to happen:
Concatenating and minifyinh our javascript, and in the right order.
Compiling less, and concatenating and minifing css.
Handle external dependencies because we are using multiple 3rd party libraries also, which maybe others are using also.
We know about requirejs, but we are not sure it is suitable for a 3rd party sort of library we are building. Also we want to enable loading as CDN, is it still suitable?
We also know about grunt, but we are not using nodejs but MVC .net. Is it relevant?
We would appreciate your input! Thanks!
I would strongly recommend using a build tool such as Gulp or Grunt, both of which can easily handle the requirements you've given. An added benefit is both can be set up to initiate parts of the build process as files are saved, freeing developers to use any editor they want instead of a particular IDE.
Related
I'm going through the concept of Micro frontends for the past few days. In Micro frontends, we create bundles of all applications wherein each bundle represents a separate web application and finally we write logic to communicate with these bundles in our base application.
For e.g., let's say we have APP 1, APP 2, and APP 3 are our Micro frontends which we bundled and used in BASE APP.
Is there any way to dynamically load these apps at runtime and without having to create a bundle of individual applications?
I'm aware that we can use iFrame but it doesn't allow cross-origin access to iFrames
Their are few things that can help with this, the best know is Single SPA, which allows you to load them all into the same page without using iFrames.
https://single-spa.js.org
If you want to use iFrames, then you will have to use the PostMessageAPI to communicate between them to get around the cross-domain issues.
There are other options, in 2019 Martin fowler wrote an overview of these that is going to be more useful than anything more I might add here.
https://martinfowler.com/articles/micro-frontends.html#IntegrationApproaches
I think this resource should be more helpful for you:
https://www.angulararchitects.io/en/aktuelles/the-microfrontend-revolution-part-2-module-federation-with-angular/
The key search term here is "Angular Module Federation", which was introduced I think in version 11 for this particular reason to be able to load Angular Modules on runtime.
I've read throug it and it's very promising to be able to built a mircofrontend like thing with angular.
Edit:
And maybe also this npm package: https://www.npmjs.com/package/#angular-architects/module-federation
Module Federation allows loading separately compiled and deployed code
(like micro frontends or plugins) into an application. This plugin makes
Module Federation work together with Angular and the CLI.
We have a large ecosystem of Javascript websites, actually Angular, that we don't plan to rewrite in c# any time soon. So the goal here is to be able to use a vendor dll in our javascript to add new features. This is a proprietary system, we don't have any alternative, either we use their dll, either we don't have the feature. I'm putting a lot of hope in webassembly here because this looked like the silver bullet to use that dll without having to rewrite the whole project in a new language.
Problem: all the examples I can find are more about using Blazor to write a website or call javascript from Blazor, I can't find anything to include some ad-hoc C# code into an existing project. I would have thought it would be a great use case though because being able to leverage C# threadpool on a webpage sounds pretty good to me!
Anyone has done something similar or know some examples/tutorials I could follow?
As Tuan says Angular and C# don't really live together in the way you suggest.
I would say there are 2 separate approaches here.
Have an C#.NET MVC app but adjust the routing so the Angular App Handles some pages and the .NET app handles others. This is OK but there are so many pitfalls such as the fact that you can not share bundled CSS and JS or maintain the structure of your Angular controllers (amongst others).
A better way would be keep your lovely Angular app the way it is but have a separate Web API application/project and use the angular app to call the dll (reference in the project) within the correct context as a REST API (via a simple POST or GET call).
It's not too clear exactly what you want to do when you say "... able to use a vendor dll in our javascript to add new features ..." but you can find info on writing and implementing C# as a Web API in .NET core here
https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore-3.1&tabs=visual-studio
I am trying to create a iOS/Android app based on a client side html5 web project, (i.e. a site) I did.
I thought Ionic would be the ideal choice, that it would help me to port my web application as soon as possible.
In my site, I would use the 'script src="https:// ..."' tag to load the external lib, then calling it in another script
tag. However, I can't import and use it in Ionic3.
I tried many solutions tagged with 'ionic2' and nothing really seems to work.
It also seems no one knows a general solution for this, since each answer was case-specific.
Does anyone know a general way of importing external js file and using its objects and 'classes' in ionic3?
(I would prefer to load from the web, but I am also accepting to download and load it fro file. )
(If ionic isn't the best way of accomplishing my objective, I am open to suggestions)
I think you need to wait till release the Ionic 4 and Stencil.
What is all about Ionic 4 and Stencil?
The magical, reusable web component generator.
Stencil is a tool for building modern Web Components
Stencil combines some of the best features from traditional
frameworks, but outputs 100% standards-compliant Custom Elements, part
of the Web Component spec.
Stencil was created by the Ionic Framework team to build faster, more
powerful mobile and web apps. Stencil is the foundation for the next
generation of Ionic Framework, but is completely independent of Ionic
or any other UI framework.
Here you can see the official doc.
Nice video about the power of Ionic 4
Nice article about it
First of all have a look at this useful ionic resource, it explains how to add thirs party libraries using npm.
If you cannot use npm because of whatever reason you have to put the source .js file into your assets/js folder and import it in your index.html using a <script> tag. Then you have to tell typescript that your library exists. This is done like so: declar var <library-handle>. Where <library-handle> can be an exported function/class if the library already uses ES2015 or the object which exposes the functions using prototype. This is the tricky part where you may have to try a few things until you get it to work.
You can have a look at my answers here, here and here where I explained how to add different third party libraries to ionic projects.
I would like to use angular.js for my Image Editing Tool in my website. Do I need node.js also?
I don't understand the scenario. If I don't need it, then when do we use both nodejs and angularjs together?
I feel your pain.
For someone new to Angular 2 development, I can feel the pain of having to learn server side technologies for something that is essentially a client side technology. From what I understand:
node.js is only used to manage the dependencies of an angular 2 application. If you can somehow manage to get those dependencies without using node.js, npm or jspm then you can run and develop your application offline. However, doing it manually will take an inexorable amount of time since you have to download files manually which may have other dependencies which will require other files to be downloaded again (yes I've been there). node.js or npm or jspm for that matter automates this process as well as taking all the necessary steps of configuring the files (jspm) so that whenever you use a particular dependency in your application, that particular dependency's other dependency will also be present in your system.
Some browsers, particularly Google Chrome restricts files loaded locally for security purposes so that certain HTML 5 technologies used by Angular 2 will produce an error when loaded using the file: protocol. So you need a server from which you can serve your application so that all the available HTML 5 technologies is available for Angular 2 to run.
node.js is also needed for the hot-module-reload capability for rapid application development since it provides a file watcher api to detect changes to source code.
But there is a way to develop Angular 2 application offline without node.js.
Remember when I said that if you can manage to get all the required dependencies, you can run and develop your application offline? If you can somehow find or create a package that has all the required dependencies your application will need, then you do not need npm or jspm to manage the dependencies for you.
For the file-access-restriction problem, you can load your project as an extension. Extensions have the ability to use all the available HTML 5 technologies as well as some powerful api's (not available even to applications served on a server), while at the same time being local to your development environment. So you do not need to fire a web server to access HTML 5 technologies if you serve your application as an extension.
For the hot-module-reload capability, you can approach it from the other way. Instead of having a file watcher in the web server to monitor changes to files in the local system, you can do it from the application itself. Since the application can fetch or xmlhttprequest resources that are needed by the application, you can periodically fetch or xmlhttprequest the resources your application needs and compare it to some cache. But how do you know which files to check? You can look for links within the page, script, of img. If you use SystemJS as the module loader, then you can use its registry to look for the files needed by your application but not loaded in the page, since it has been transpiled or something. While doing all this can be a performance drain to your system along with the added overhead of transpiling or preprocessing non-native code, this job can be outsourced to a web worker which will free up the main execution thread in the system for your application code.
Don't believe me? Here's proof.
The Angular in Chrome project on github contains a zipped package which contains the required dependencies needed to develop a minimal Angular 2 application (by minimal, I am referring to the Tour of Heroes tutorial referred on the quickstart page). So that if you are on a system not supported by node.js (yes there are, ChromeOS for instance) or just on a restricted system in which node.js just isn't available, all the required dependencies are available and you do not need npm or jspm to manage the required dependencies for you.
There is a proof of concept extension which serves the tour of heroes tutorial (the development files, typescript and all) locally as a chrome extension.
The extension also implements a hot-module-reload functionality by hooking into the hmr-primitives developed by alexis vincent for SystemJS. The hot-module-reload functionality is enabled by a single javascript file so that if this functionality is not needed or is taking up too much resources, then you can just remove the offending line of code.
But be warned though.
If you are using this system, then you need a way to update your development package as technology moves forward and it moves at a rapid pace (what with talk of Angular 3 when Angular 2 has just been released) or the technologies that you are using to develop your application may become obsolete or that somewhere along the line an api change may prevent your application from being functional in the future. You are also not guaranteed to have up-to-date repositories for the dependencies since these types of packages are maintained manually.
Bundling your application as a Chrome extension like in Angular in Chrome will introduce performance bottlenecks. Since code is transpiled and modules are lazy loaded, you lose the advances of JIT compilation and other performance enhancements that modern javascript engines use to optimize code run on the browser. However, what you lose in performance, you gain the flexibility to use the technology that you prefer to develop in. There is always a tradeoff. Moreover, the performance hit is only at the beginning as code is loaded. Once it has been loaded by the application, then the system will know how to implement the performance enhancements. When you distribute your application, you really need to compile the needed resources to take advantage of the performance enhancements of modern javascript engines.
The hot-module-reload capability is currently a hackish way of implementing a file watcher which uses common conventions for a project (temp1.ts, temp1.css, temp1.htm) since there is no way (I might be wrong on this) to get a definitive list of all the resources needed by the application but not loaded on the main page (the transpiled or pre-processed resources).
You don't need NodeJS for creating a client side image editing tool.
AngularJS is a web application framework, maintained by Google and the community, that assists with creating single-page applications, which consist of one HTML page with CSS and JavaScript on the client side.
But if someday you will want to upload and store those images on a server and make them accessible by multiple clients - then yes you will also need a server. This server could be made with NodeJS.
node.js is used to write Javascript on the server side.
angular.js is a client side framework.
You don't need node.js to use angular.js but, you can install npm (node package manager) to use some awesome tools that will make your life as an angular developer much easier.
For example: yoeman which is a great scaffolding tool.
There are many other tools available on npm here is a link to their site
Learn more about angular at the official angular website or at the angular youtube channel
No. Angular is used at the client side and Node for the server side.
They use to go together as the MEAN Stack but it's not necessary.
You don't need Node.JS for AngularJS to work. NodeJS is server side, AngularJS is client side.
If you are new to AngularJS, I'd suggest this tutorial AngularJS tutorial.
In the tutorial you will use NodeJS, you will understand why the two work together, but are not necessary.
It's hard to answer without knowing how your Imaging editing tool works. But to answer your question, no you do not need Node.js to use AngularJS.
Angular is a front-end javascript framework which operates in the clients web browser.
Node is a service which can execute javascript and is often used on a server maybe in replacement of PHP (like in MEAN stack).
Also, because Node is a service which can execute javascript it can be used in your local computer when developing Angular applications to do background tasks such as minifying css and javascript and performing tests.
So if your Imaging editing tool is developed in javascript and your application used Angular and Node (as a web server), the code could be executed on either client side or server side.
Have a read on MEAN stack to see where Node and Angular fit in. You don't even need Node at all but it's nice to develop all in the same language.
Reason for installing NodeJs
As a web browser such as Chrome, Firefox etc. understands only JavaScript, we have to transpile our Typescript to JavaScript. Therefore, the Typescript transpiler requires Node.js for generating the Typescript code to JavaScript.
How to create a build system for number of JS client applications, all using same framework but different combinations of framework parts? This would enable all client applications receive the framework updates automatically, without having to rely on one distribution file, containing all framework abilities (which would be rather sub-optimal).
In best case scenario, the client applications would use the only specific parts (raw, non-minimized files) from the framework project, while when deployed, the application would have only one script containing only the needed functionalities of the framework. Also, if(/when) all this can't be done automatically, there should be only one "makefile" that would be used for both, loading single files in development and building the single JS file for deployment.
GWT does what you are requesting through a feature called deferred binding.
http://code.google.com/webtoolkit/doc/latest/DevGuideCodingBasicsDeferred.html
THE GWT compiler generates many versions of code at compile time,
versions are created automatically per browser type, and it's possible to extend this functionality to other parameters such as user localization preferences or completely arbitrary parameters.
I finally managed to do this with combination of custom buildfiles, custom runtime build system done in PHP, sophisticated JavaScript non-coupling framework and massive Ant build scripts, doing the compiling and deployment. :P