I have a pure javascript library that users can install via npm. I want to add/create an Angular "wrapper" to this library so that it can be used seamlessly within Angular projects but I am not sure how to do this. I am using Angular-cli v6.
This is very similar to How does one go about creating an Angular library wrapper for an existing Javascript library?, however the only response is a link to ng-packagr. I have done a few tutorials on creating a library with ng-packagr, however they don't describe (and I can't find examples elsewhere) of how to create a wrapper around a non-Angular JS library.
Any help is greatly appreciated! :)
An old question but I love it. There's no one simple answer to it, so here's how I did it:
Short version
Read about the internals and how I wrapped the Google Maps Javascript API library
Long version
The following is very abstract, but this is an abstract question, so here goes...
The basic things you probably need to implement are:
Detecting changes in your Angular library and delegating them to the native library.
Detecting native events and bubbling them into your Angular library.
Switching execution in and out of Angular using NgZone.
Other considerations might be performance, scalability, adding new tools over the existing ones, etc. No matter what library you're dealing with, you'll probably end up wrapping a function with a function, a class with a class, a module with a module, etc.
The question arises: "Am I supposed to manually write all that code? Am I seriously going to write a method for each native method?? What happens when the native library changes implementation? I would have to change my code everywhere... 🤔"
To simplify and make your wrapping library scalable, you could automate the wrapping mechanism (one way is using a Javascript Proxy) object.
Combine it with TypeScript's utility types and extension interfaces, and you can create a class that automatically delegates calls to the relevant native object/function, AND you'll get intellisense (for methods that you didn't need to manually implement in your wrapper!).
Here's a more detailed explanation with examples
For events delegation, you could create a mechanism that generates observables (or EventEmitters) for your native events.
In some cases you should consider using NgZone.runOutsideAngular() to prevent unnecessary change detection runs for code that is executed in the native library. On the other hand, you should consider using NgZone.run() to bring execution into Angular's zone when running native code that should enter and affect change detection cycles.
My Angular Google Maps library is open source and you can have a look. I have implemented some very interesting architectural mechanisms in it.
Anyone running into this post and wants more details or help is welcome to contact me.
Cheers 🥂
Related
Please someone answer by justifying the definition of library and framework.
"Your code calls library whereas framework calls your code."
React cannot be considered a library given provided, absolutely correct, and only one that makes any sense definition of the difference between framework and library.
The library is just a set of methods/functions.
The framework provides a frame for work, it requires the code to be written in a certain way.
Considering the above, React obviously is the framework. Very complex, very opinionated framework.
Why it has been promoted as a library?
IMHO because promoters of React are cheap manipulators who wanted to steal the popularity of jQuery - the most popular JavaScript library.
Good library vs framework article. The author uses jQuery as an example of a library and Vue as an example of a framework. Probably, just in order to not tease geese. But Vue code from provided example is almost similar to analogic React code.
The reason is basically related to use case of both the technologies, as React is called as a library because of its behavior of easy to fit into any js environment and doesn't bound user to use things React way, while one the other hand Angular is complete MVC (Model View Controller) architecture, and restrict user to follow its pattern of framework.
Due to some architectural decisions, my team has decided to fallback to using Javascript without any framework dependencies (Angular or react).
I would now want to write custom components(that do the exact same thing as Angular's components: a selector that can be used in HTML with a scope & a controller to play with) with no dependencies on frameworks.
jQuery widgets is an option we thought of. But there's a dependency on jQuery :(
What's the best approach to proceed?
Does ES6 provide any ways to do this?
Angular is parsing the html and searching to match with the selectors.. before this, it parses your templates to generate dynamic code... and a lot more things under the hood.. so, no, you wont be able to create a custom html tag easily.
Maybe take a look at Polymer?
https://www.polymer-project.org/
Why bother creating something what is sucessfully done by a huge team of developers on your own? You will most likely fail.
But if you still want to try it, there's a thing called WebComponents, but it has very limited browser support at the moment. A better support would also lead to another library called Polymer.
Another lightweight library to create custom components is Vue.js.
Fyi: React isn't a framework.
I would like to test a web app that was drastically redesigned to use ExtJS to drive its UI.
I have done some online searching but couldn't find any recommendation for a good framework to handle it properly.
Up till now we have been using WatiN to create tests.
Note that we do not own the web app code.
What are the best options currently available?
You should look at using Siesta, it's a unit testing and functional testing tool designed to help you test Ext JS and Sencha Touch (and it's also used by Sencha internally to test Ext JS itself). Since Siesta knows a lot about Ext JS you can write expressive tests using Component Query instead of CSS and get much more robust test compared to simpler tools described in other answers in this thread. Here's a sample test script in plain JS:
t.chain(
{ click : ">>textfield[name=user]" },
{ type : "Mike[TAB]Password" },
{ click : ">>button[name=loginbutton]" }
);
DISCLAIMER: I work for the company that created it.
http://www.bryntum.com/products/siesta/
Are you looking to do a straight functional test of your web page or are you looking to narrow your tests specifically to the JavaScript in ExtJS?
If it's the former (functional at the UI level), then WatiN/Watir/Webdriver ought to work for you. (If they're not working then I'd love to get more details around specific issues you're running in to.)
If it's the latter then you might investigate Jasmine which gives a lot of interesting capabilities around unit testing your JavaScript at the UI layer.
(If it's functional testing, you might also check out Telerik's Test Studio for functional automation. I'm the Evangelist for that tool, so I'm a bit biased...)
You may want to look at RIATest.
Version 5.0 fully supports ExtJS testing. ExtJS UI widgets are first class citizen in RIATest. This means that unlike other HTML testing tools you do not need to write tests that manipulate the HTML DOM elements. The tests in RIATest operate in terms of ExtJS UI widgets.
Examples of RIATest scripts that work with ExtJS widgets:
The following clicks on an ExtJS button with label "Next Page":
ExtButton("Next Page")=>click();
And the following does drag-n-drop of a row from one ExtJS tree to another:
ExtRow("Controller.js")=>dragAndDropTo(ExtTreePanel("#tree2")->ExtRow("Custom Ext JS"));
And this collapses the header of an ExtJS box:
ExtBox("Feeds")->ExtHeader("FeedsÐ’")->ExtCollapser()=>click();
(All sample code above is from real test scripts that run on ExtJS sample applications).
RIATest also knows when to automatically wait for ExtJS AJAX to finish, so if your UI does dynamic content downloading the tests will auto-magically wait until data is received from server.
(Disclaimer: I am a RIATest team member).
Sahi is an automation and testing tool I have recently come around as I am in a similar search as you... Selenium hasnt worked for me (as it hasnt for many around the web... havent found anything to make it work... dynamic IDs and other Ext related particularities mess with it apparently)...
take a look at sahi maybe it will be useful... www.sahi.co.in (I have no relation, I discovered it recently and found it useful).
You want to do Functional Testing. Selenium is a good choice. It has API implementations in a slew of languages (Java, Ruby, Python) and it uses Webdriver under the covers.
Ranorex can handle Ext-Js as well, although turning it into first class citizens will require some custom coding. The secret in general is to avoid using id's for object recognition, as they change around and use innertext property instead.
Personally found using xpath with extjs flaky in places.
You're better off (in Java) writing a method which uses a JavaScript component query to pull out the element id. (if it has one)
We are starting to create an application using JavaScript and HTML5 which will use rest API to access server resources taking the advantage of jQuery awesomeness and easiness which our dev team is already comfortable with. This application is going to be made multilingual. We had decided later that we will write our DOM using JavaScript which will allow us the flexibility to use our UI bits for integration with our other applications and will create our own widgets using jQuery UI widgets. Then by just adding a script tag referencing JavaScript file in a relevant page of our other application, we will have most of our integration for that particular feature done.
Because it takes lot of amount of coding for creating DOM using JavaScript, we started looking in search of tools which will help us easily convert HTML to JavaScript for creation of UI and hence Google Closure Templates came in.
At this time what I thought of was, using Google closure for writing the UI DOM bit as it can quickly give me JavaScript for my DOM and then for other JavaScript (i.e. for server side communication and for other UI logic like changing of UI once got response from the server and x should change to y on click of z kind of things) which needs to be handwritten, I should use jQuery which is easy to write.
But after looking at this question, I see that both are compared against each other and it left me wondering on few things.
If I go by what I've thought of doing then, will I be able to call the functions generated by Google Closure in my jQuery widgets to render the UI?
If I leave jQuery and just use Google Closure will it be enough for my requirements?
As I started reading Google Closure documentation, I found that it has a whole new world of it's own and learning curve is involved. How much it is? If it is not much, then our team of 5 devs will be ready to learn it.
On 2 and 3, it would be great if anyone who has already used it can provide some insight.
Note:- Just in case if it has any relevance, we are working on Microsoft .NET stack for server side.
Closure Library and Closure Templates do not depend on one another, so you can certainly use Closure Templates with jQuery without pulling in the Closure Library or the Closure Compiler. To use Templates with jQuery, you translate your Closure Template files (aka "Soy" files) using SoyToJsSrcCompiler.jar as described in the documentation. Then you will have one JavaScript file for each Soy file where each JavaScript file contains one function per template defined in the corresponding Soy file.
To use the generated JavaScript functions, you must also include soyutils.js, which is a set of utilities required by the generated functions. Therefore, your production system should include the following JavaScript files concatenated/minified in this order:
soyutils.js
JavaScript generated from Soy
jQuery library
Your application code, which presumably depends on both jQuery and your template functions.
Getting up to speed on Closure Templates is considerably easier than learning the Library or the Compiler, so I'm sure that your dev team can pick it up quickly. I believe the online documentation is thorough without being overwhelming, so the syntax and usage should not take long to learn.
Note that if you decide to use the Closure Library instead of jQuery at some point, you should include soyutils_usegoog.js instead of soyutils.js. Though if you decide to rewrite your application logic to depend on Closure Library instead of jQuery after you have a substantial amount of code, this small change will likely be the least of your concerns! That is, I'm sure you could ultimately write your entire application using Google Closure, but migrating from one JavaScript library to another for a large application will likely require so many code changes that you may be too intimidated to take on the migration.
I've started looking into architecturing a javascript framework.
I don't want to reinvent the wheel here, especially regarding browser quirks, and know that for that matter, I'll have to rely, at some point, on some commonly-used libraries to handle low-level concerns.
The thing is, I'm not sure how i can depend on an external library for some piece of functionality (say for example dom manipulation), without tying it to my design.
Practical examples would help make a better point, but I'm not at the design stage yet, and I'm merely trying to avoid getting started on the wrong foot.
So I'm looking for some examples, guidelines, best-practices or maybe patterns that could help in this situation.
Any insight ?
EDIT : Bit of a clarification on why I'd want to do this.
My goal is to build something resembling more of an application framework than most traditional libraries like jQuery.
Think layered architecture, where the libraries would fit into the infrastructure layer (as per Evans' definition in Domain Driven Design), and handle things such as events, dom traversing and manipulation etc...
This is a very broad question, but if I were you, I would use jQuery as a base. It is a very easy library to extend and add functionality too.
I'd recommend grabbing a copy of ExtJS and taking a look at how they provide support for replacing the underlying core of their product. You can use their higher level libraries, such as grids, trees, etc, but choose to use YUI or prototype in place of their Ext core.
That should give you a good starting point.
Edit to answer comment:
Once you've downloaded ExtJS, take a look in the "adapter" folder. In there, you'll see the various adapters that exist to make ExtJS work with other libraries. You'll quickly see how they define functions that in turn make use of the appropriate underlying lib.
Segregate your code:
use the external libraries to the fullest possible, within their separate section of code.
Taking jQuery as an example, just designate a section for interfacing with jQuery and then use jQuery within that section of the library like there's no tomorrow, and give it interface functions that the rest of the code uses exclusively.
Frankly, if you integrate a library with your code and try to make it generic enough that you can trivially swap it out with something else, you're probably going to neuter the library to the point where you might as well have not included it at all.
Accept that you may need to rewrite if you end up swapping libraries, but prepare for that by giving the library-interfacing code it's own separate section, and you'll be able to write less generic, more powerful code with those external libraries and save yourself a lot of work.
This doesn't answer your pattern question, but a word about the frameworks. All of the modern JavaScript libraries are pretty good at playing well with each other, but some are better than others. Just make sure that they libraries don't monkey-patch the core objects with arbitrary properties or muck with the global namespace and you should be good to go. JQuery and YUI are both well designed and namespaced libraries. Dojo is also quite good, but a couple years ago when looking at all of the options, it seemed like Dojo encouraged the use of proprietary element attributes in markup as JS hooks. At that time Prototype was the library that mucked with objects like String/Array and didn't play well with others. I haven't looked/used Dojo or Prototype so take that with a grain of salt. I'm actively using YUI and JQuery in the same app; YUI for widgets and event management and JQuery for Selector/DOM manipulation.
I'd suggest you pick a single general purpose library or no library at all, depending on the requirements of the framework you plan to write. It's very difficult to make any kind of recommendation without more information, such as what your framework is aiming to achieve, who will be using it and in what kind of environment.
If you're considering writing a script of reasonable complexity then I would suggest learning the relevant "low level" DOM manipulation techniques for yourself. It's not as difficult as devotees of some of the famous general purpose libraries would have you believe.
Use some kind of interface to link to the library.
Don't do:
$("blah").something();
do
something("blah")
function something(id){
$(id).something();
}
Since you could call something() 20 times, it'll be simpler to update if the actual use of the library is in only 1 place.
It'll add development time and then complexity, but you won't be as dependent on a library.
I don't think this can be achieved very effortlessly. If you really want this behavior, I think you'd have to manually map the features that are covered by all libraries you want to include support for.
So that the implementation would look like:
yourLibrary.coreFramework = 'prototype';
yourLibrary.doStuff();
And your librar would treat it in the following manner:
function doStuff() {
var elem = getElement('id');
// do stuff with 'elem';
}
function getElement(id) {
switch(this.coreFramework) {
case 'prototype': return $(id);
case 'jquery': return $('#'+id);
/* etc */
}
}
Check out the jQuery or prototype frameworks.
If you decide you need to, then extend these.