Proper way to upgrade jquery UI library - javascript

I am currently working on to upgrade javascript libraries due to some vulnerability concern. The one I am stuck right now is JQuery-ui-1.10.1.custom.js. I need to upgrade it to Jquery-ui-1.12.0.js but I am not sure if the regular Jquery-UI-1.12 file could replace this custom file. This is an old project .NET project. I am not sure whats the difference between the regular and custom files. Any help is appreciated.

The only way to be sure that upgrading won't break your app is your tests. If you don't have a testing strategy, you'll need to adopt one. When your code is well covered, you'll be able to swap the jQuery libs and know right away if something is breaking.
Software Testing approaches
https://jqueryui.com/changelog/1.11.1/
https://jqueryui.com/changelog/1.11.2/

Related

How to find all jquery methods used in a javascript file using regular expressions?

This may be dumb idea but here is what I am trying to achieve. A project I am working on has a legacy front-end code. Site is super slow and one of the contributing factor is jQuery. My idea is to write a utility that will tell me all the jQuery functions that were used on the final build. So that I can build jQuery from the source and remove what is unnecessary.
I've tried closure compiler by google with no luck. Even tree-shaking resulted in broken code.
I don't know if this dumb but this is what I could think right off the bat. All criticism, solutions are welcome.
Can you just search file by file for any instance of "$(" ? This indicates something is jQuery.

Aurelia JS Dependencies

First, I do not have much background in JS; Aurelia JS is not working for me, I get the following error in Chrome:
1) TypeError: e.configure is not a function
at aurelia-core.min.js:1
If I use the Aurelia basic-aurelia-project.zip
2) I get Uncaught (in promise) Error: Cannot set SystemJS.map["aurelia-framework"] directly. Use SystemJS.config({ map: { "aurelia-framework": ... } }) rather.
If I maken eclipse project and use the below in index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.20.9/system.js"></script>
<script src="lib/aurelia-core.min.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
If I have to follow simple dependency inclusion model with 'script' elements in head/body what are the scripts to be included.
In addition, I did not find any CDN link for Aurelia, which makes me wonder if Aurelia is production ready or a mere Beta level upcoming JS framework.
I do not use Node.js etc. so npm etc. does not work for me. Is there a simpler way of using Aurelia (in AngularJS 1.x style including script elements) or there is some other more complicated way.
I am not sure if Aurelia is worth the effort to adopt in terms of configuration/dependency (my opinion only).
If someone can help me resolve the above problems & dependencies it shall be great.
I'll answer this question based on my opinon.
In addition, I did not find any CDN link for Aurelia, which makes me
wonder if Aurelia is production ready or a mere Beta level upcoming JS
framework.
You may not find any CDN link for Aurelia because it's not like other libraries, such as jQuery. There's no reason for a CDN link because you would never load it using script tags in a production environment (unless if you really know what you're doing). Aurelia (as any other modern js framework) was made to be used with modern loading and bundling tools.
I do not use Node.js etc. so npm etc. does not work for me. Is there a
simpler way of using Aurelia (in AngularJS 1.x style including script
elements) or there is some other more complicated way.
I'm sorry to tell you this, but if you want to use a modern JS framework (Aurelia, Angular2, Vue.js), you will have to deal with node.js, npm, etc. All modern js frameworks have some building process that run under a node.js environment. It's possible to avoid it, but this would only make things harder.
There are simpler ways to use Aurelia, like the project you've mentioned in your question. However, It was mainly made for learning purposes. You can still use them in a real scenario but you will find a lot of difficulties since there will be no tool to help you.
NodeJS tools are there to help us! Give them a chance and you won't regret it. Trust me :)
If you have some strict companies rules that don't allow you to use Node, I think you should to talk to your leaders and try to workaround that.
#Fabio Luz,
please excuse me, this is not an answer, but a longer note to your answer - there might be a scenario for Aurelia modules in CDN...
I understand, that it is very good to have ability to bundle and do the tree shaking of the framework library for the "lonely" SPA architecture. But I am not sure and I wonder whether it would be better to have some different approach - e.g. having the certain Aurelia modules in a CDN. I wonder that in case of a possible decision e.g. to use Aurelia commonly as a platform for continuous development of customization for SharePoint Online /Office365 using the SharePoint Framework. I have tried to configure Aurelia as externals for the webpack in a spfx solution, but I was unsuccessful. I am also not so familiar with all the tooling, so I might have done some beginner's mistake :(. Pity, that the Aurelia cli and the spfx tooling versions are not in a harmony currently - the spfx has to use the gulp with webpack ver.3, though the aurelia works with newer webpack ver.4

Use DogeScript in my website?

I'm kind of embarrassed to ask this, but I have noticed "DogeScript" which supposedly compiles into JavaScript. Is this real or is the whole thing just prank. And there is a syntax, which is funny as hell, which is why I want to use it.
If it is real, how can I use it in my website?
The dogescript website says it can be installed using npm -- so probably very much like coffeescript, it would require you using nodejs/meteor or that you precompiled the script to javascript if you are using a different webserver.

jQuery and Windows 8 JavaScript Metro Style Apps

Can jQuery be used in Windows 8 Metro-style apps developed using the JavaScript API? I'm looking at the samples, and there's a lot of standard DOM manipulation like document.getElementById, addEventListener, etc. I'd like to use jQuery for productivity.
The $ is not magic. jQuery is just a javascript library. It should run fine.
The only thing that might not work are cssHooks which won't take into account any 'quirks' of their environment.
So yes, it will work, if you trust Microsoft to produce an environment that follows the HTML/CSS/JS specifications.
Do you feel lucky?
Yes, it works, as will any JavaScript library. I verified it on one of the tablets they gave out at the BUILD conference.
However, do not expect to use a CDN to load in the script. You have to download it, add it to the project, and reference it locally.
tl;dr : you can use jQuery 1.7+, but it's not (yet?) fully integrated when markup modification is involved.
Quote from the Dev Center (msdn)
Using jQuery
You can use jQuery in your Windows Store app using JavaScript, but only versions 1.7 and later. We recommend always using the latest version.
That means that it will work, but you will encounter some non-standard behaviors as listed in the HTML and DOM API changes list (msdn)
There are exceptions mentioned when setting the innerHtml property (among others : Making HTML safer) if there is unsafe markup, but this is non-blocking and the simple fact of loading the jQuery library (1.8.2) will trigger a few.
As mentioned before, you do need to use a local copy of the library (no CDN).
You can use any JS library. I suspect that methods like WinJS.xhr (aka '$.ajax') where written so that WinJS doesnt have a dependency on jQuery.
It should run fine. jQuery is just a library. The $('#someid') will internally call the document.getElementById You can use it just as if you can use the javascript code you write yourself...
JQuery should work fine but bear in mind there is some built in functionality for doing this kind of thing, in the case of your example:
WinJS.Utilities.query("#someId li")
.listen("click", function (result) {
Query Collection Documentation
Don't use any windows libraries like WinJS. Why would you want to lock yourself and be dependent on proprietary code? Stick with the usual stuff, i.e. HTML, CSS, JS(JQuery or otherwise). It will only make your future support/dev far more predictable ...
As with all third party JavaScript libraries there are a couple of things you should keep in mind.
Always try to include the .js sourcefile in your project when possible. Calling out to a CDN or external hosted location will flag you for some security checks you wouldn't normally have to go through.
I have used a couple of jQuery versions in coding my own apps. Some of them broke so keep in mind there is still no guarantee. Other libraries, like SoundJS, I used older versions that I know do work.
If you are looking for some examples of third party libraries I have some posts on Knockout and Upshot here:
http://blogs.msdn.com/b/davedev/archive/2012/05/02/connecting-to-wcf-ria-services-in-a-windows-8-metro-style-app-using-upshot-js-and-kockout-js.aspx
I have also written a free Windows Store Gaming Kit that uses third party libraries you can grab the free source for that here: http://win8gamekit.codeplex.com
Actually you can download it through Visual Studio. If you download NuGet Package Manager.
TOOLS->Add Packages & Extensions
Search the left online packages for NuGet Package Manager and install.
Then when in a project that you want jQuery, right click on your references and add a NuGet package, and search jQuery. That's what I use.

How should I start a new JavaScript project (Testing, Developing, Building)?

I've developing JavaScript since many years but have never really thought about the whole testing, developing and building stuff - but I realized it's pretty much necessary. We've just used a Subversion repository with simple release tagging (switching to git soon). As a new bigger pure JavaScript project (using jQuery) is arriving soon, I'd like to optimize the whole process.
I already did some research but never found a good starting tutorial.
It's definetly a good idea to split classes and separate code blocks into several js-files and not a big one (as Prototype or jQuery do it). These js-files must be "build" into a single file. How do I achieve that?
It's pretty much necessary to Unit-test the stuff me and my colleagues are coding. I found the js-test-driver which has an eclipse plugin that seems to be doing his job quite good. If my developer-folder contains all these src- and src-test-files, how do I integrate this in the building process?
For testing, take a look at this: https://stackoverflow.com/questions/32809/javascript-unit-testing
For merging all of your JavaScript into one file you can use something like YUI Compressor. You need to be looking for a minimizer first, compression second. A minimizer just takes the files and merges them together and gets rid of whitespace. A compressor will actually try to optimize the js for you by changing variable names and removing unnecessary code.
As for unit testing I am unsure of how you will want to do that. There are a few unit test libraries out there. A popular tool for testing is Selenium. I don't currently do unit testing so I am out of my element there..
For setting up your code you could always look at using a JavaScript framework like ExtJS or JavaScriptMVC. Those help you with setting up your code in the proper way and also helps focus your team on the proper standards and coding structure while also writing a lot of the code for you so you don't have to re-invent the wheel.
EDIT: Just a quick after thought. Even if you don't want to use a JavaScript framework, I would suggest checking them out, especially ExtJS, just to see how they organize their code and some of the tricks they do to keep it clean.
I'll answer part of your question:
These js-files must be "build" into a
single file.
This is possible only with server side language - in ASP.NET you have built in tools for that, otherwise build your own "merger" server side file and reference that file instead of the actual .js files.
These js-files must be "build" into a single file. How do I achieve that?
Definitely keep your files separate in version control, and only merge them during the build process.
The YUI compressor mentioned elsewhere is a java-based tool that will not only merge but -- of course! -- compress your files for faster download.
If you just want a simple merge of files, a simple Perl or bash-script (or other preferred scripting language) could concatenate multiple .js files into one for release -- just make sure that the build script also updates all HTML in the release to reference only the single page.

Categories