Javascript package manager inside the browser - javascript

I'd really like a package manager like Bower etc that I can just call from javascript in a browser to load a javascript package from the web and use it right away. Right now I'm just trying to use Jsdelivr, which unfortunately has no real api and lacks necessary integration conventions.
Is there any existing way to do this?

Related

How can I use a javascript lib in flutter web?

So im developing a project in flutter web and my client request the use of a package which is not available for flutter web (dart). This package is available in js (https://github.com/torusresearch/CustomAuth).
I wanted to know if there is any way that I can make use (or install) this package inside my flutter web project and make use of it. I know Im able to call javascript code inside flutter, but this may get a little bit complex when it requires the use of js packages. I know that there is this package in flutter -> https://pub.dev/packages/js , that can help with the implementation of javascript code.
Anyone knows how can I achieve this goal?

Best practice: Typescript: Let a customer extend an application with custom code

we have an angular 9 based application framework, which gives a customer the possibility to configurate an application with fields and layouts. This works pretty nice.
But now we get to the point, where a customer wants to implement special features, like "He enters a value into a textfield and a request to a 3rd party software should be fired to load new data and autofill other values".
We could implement every possible interaction or allow to create custom snippets in javascript.
But in the past i have had a lot of bad experience with these base javascript snippets because they didn't have the needed standard functionality like typescript provides me.
1) Is there a way how a user can create custom code during runtime with typescript rather than plane javascript?
Yes i know typecript needs to be compiled before running, but I ask because I want to know if there is another way?
2) Alternative question:
Can a user develop an angular application and add it as plugin during runtime? Something like an extension or a custom functionality which will be added to the portal for the customer which is not part of the base framework?
Thanks for your help.
I don't know if I understand your question well but from my point of view the only way that an other user want to interact with the main Angular project is that he create a library by using the command ng generate library my-lib. (https://angular.io/guide/creating-libraries)
From there he can create a new module and then someone else import this new lib into the main project and that's it.
The new lib can be maintained by the "customer" and he can release new version of it if the lib is hosted in npm repository and from the main application just need to npm i customer-lib#latest
Did I answerd to your question ?
The thing is we have a hosted cloud application, where we have a standard implementation which is already compiled and deployed in a docker container.
Now a customer should have the possibility to extend the functionality by adding scripts and modules. Like it is common for example in wordpress. Where you have a standard implementation and if you want another wysiwyg Editor you install a plugin.
I know the only way of injecting code is via javascript but I just wanted to ask if there is another solution for this which will not lead to redploy the whole application.

How do I email a javascript app to someone who doesn't have javascript?

I'm trying to find something that can run my javascript project so that I can send it as a finished project?
I've tried googling for results, which wasn't helpful.
I also found a few youtube videos. They didn't have much of what I wanted.
I have a friend who doesn't have javascript and I want to send him over my finished project. Either as a file or an application, but I'd like it to be sent over so he can see it without the use of javascript and seeing the code.
If they have a browser they have JavaScript. Package up your code as an HTML file that loads the JavaScript.
If this is a Node application then you may need to look at packaging it up differently. Installing Node isn't difficult, and it's available for pretty much anything that can compute.
For a more ambitious packaging you can use something like Electron to make a distributable application. This is a larger investment of time, but it's the easiest for the user to use.

deploying a javascript 3rd party library (requirejs/grunt)

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.

Do I need node.js to use Angularjs?

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.

Categories