I am under a scenario where I have to build a portal container in HTML5 and Javascript. This container will be provided with 'n' number of widget URLs and container is responsible to load them through Ajax in DIVs (not in iFrame).
Now the question is how to make the definitions of JavaScript functions of each widget, separate? For example, I have two DIVs on the container page, Widget1_DIV and Widget2_DIV. HTML, JS and CSS of Widget1 will be placed in Widget1_DIV and similarly for Widget2.
Now suppose both the widgets have a JS function with same name, 'foo', which will conflict once they are embedded in same DOM. I want to know that will RequireJS helps in avoiding the conflict or the right solution to make both widget's DIVs modular?
Thanks
Did you consider using any JS Framework? I recommend you AngularJS because of its functionality, MVC approach and flexibility. I know, that this requires a lot of work on the beginning of project life-cycle, but later certainly you observe advantages and robust page structure.
In addition, Angular JS allows you to preserve separated project structure:
- WidgetName
| - javascriptfile.js
| - widgetpage.html
| - javascriptfile_test.js
See more: https://angularjs.org/
Of course you don't need to use this specific framework, there are a lot of other fantastic tools: Knockout, Backbone, ... .
How about using a dashboard framework for that. This should make things easier.
For ex.:
http://dashing.io/
Related
I have this website (in Hebrew): http://www.iping.co.il (if you could have a look at it maybe with google translate and see what it does it could be great but not a must).
It basically a website that shows your IP, and gives you a set of tools (like ping, whois check, open port checks...).
I've built it a while back and I was using jQuery and jQuery UI to do all the work (like opening dialogs, call the server, change the DOM, show a progress bar...).
Now I'm working on rebuilding it - I'm rebuilding using ASP.NET MVC 5, HTML5 and Bootstrap3. I figured it's a great little website to test new things I've been reading about lately. And one of those things I would like to try and implement (after reading much about) is AngularJS.
As far as I know, AngularJS is not meant to change the DOM directly, but use directives and 2 way bindings to do so.
I have a lot of code, and plugins that I use that uses jQuery and jQuery UI to (for example the dialogs, the progress bar and so on... things that I haven't figured out how to do with AngularJS). It seems that if I use the jQueryUI progress bar and update it from from AngularJS that I'm breaking some rules here and that it's probably dirty and not the way it should be written.
So my question is, what is the correct way to work when and build a rich UI when using AngularJS? is jQuery and jQueryUI even still relevant? if so, is there a correct way to use them (maybe DI somehow?)?
I've searched and found something called AngularJS UI - but it's not as rich as jQueryUI.
Thank you
Using plugins within directives is fairly simple in concept.
<div my-directive></div>
Following is a very minimialistic directive with just enough code to initialize a plugin. The returned function is equivalent to link in a more defined directive
angular.module('myApp').directive('myDirective',function(/* dependencies*/){
/* element is a jQuery object when jQuery is included in page before angular.js*/
return function(scope,element,attrs){
/* can use attributes or scope to pass options to plugin if needed*/
element.someJqueryPlugin();
}
});
This would be equivalent to writing in jQuery only:
$(function(){
$('[my-directive]').someJqueryPlugin();
});
If you want to use AngularJS and Bootstrap I suggest you take a look at these directives:
http://angular-ui.github.io/bootstrap/
Once you load the modules, you can set up say a progress bar this way:
<progressbar max="max" value="dynamic">
<span style="color:black; white-space:nowrap;">{{dynamic}} / {{max}}</span>
</progressbar>
You shouldn't even need to include JQuery if you only need the Bootstrap components.
we have a big ExtJS (still ExtJs 2) application, which provides windows explorer like functionality on a Java EE server.
We now evaluate implementing a new functionality; we could base this functionality on a jQuery plug in.
Is it recommended to use jQuery and ExtJs in one application?
Or will I have to deal with side effects occurring?
You will not have to deal with any side effect. The only problems I ever ran into when I did this is if I tried to operate on elements that Extjs relied on being left alone. Just make sure that when you start operating using jQuery that you're working inside a div that extjs doesn't plan to mess with. The best way to do this is to inherit from Ext.Component and then operate inside the div it provides. Ext doesn't do anything inside this div so you should be ok. You can also tap into the resize functionality if you need to, though this is not really necessary.
My company does so with no problems on a fairly large Apache/Catalyst site. We do use jQuery() rather than $() due to some old Prototype stuff on our site.
More: Blueprint CSS Extjs and JQuery in the same page, best way to make them coexist without conflict
keep jQuery within the jQuery namespace http://api.jquery.com/jQuery.noConflict/
Use it like so: $.noConflict();
jQuery only adds a single object (jQuery) to the window's context so you won't have any conflicts.
PROBLEM: Some third party libraries for jquery may rely on static webpage organization. As ExtJS components can be added to webpage dynamically - they will have no functions from third party libraries.
SOLUTION: You will have to run this library's script after component is added (use afterrender event, for example). Then you can call these functions on this ext component.
I have an advertising website and I'm looking for a snippet or web app that would let my users easily build their own custom ads. It needs to have a simple interface and should have simple objects to insert, such as images, divs, and text with font options.
What you're looking for is called "WYSIWYG editors". Most famous ones: TinyMCE and CKEditor.
http://www.turnkeylinux.org/blog/tinymce-vs-ckeditor
SPABuilder or Ext Gui Builder, the latter looking considerably better. Note that they introduce their own set of widgets, which is a must if you want this type of application. There is still a learning curve in these, but I can't see how you could eliminate this without a brain-to-computer interface or magic.
So if you want an arbitrary set of widgets you might need to code up something yourself, although you might have some luck restyling elements rendered by the above tools.
I am looking at building a small app that is more or less several nested lists, and selecting various items in each list will filter the contents of the other nested lists.
List One
Apple
Phone
iPhone
Computer
Macbook Air
Samsung
Phone
Galaxy S
List Two
Best Buy
Ann Arbor, MI
Chicago, IL
Walmart
Lansing, MI
If a user Clicks on "Apple > Phone", the server will find the associated entiries in list Two for, and update List Two to show only "Best Buy" (assuming Best Buy is the only store selling Phones made by Apple)
My question, is does anyone have a recommendation for what Front end JS library I should use to build this out? This is going to be alot of updating the DOM (the lists) based on AJAX JSON responses from the server.
I took a look at KnockoutJS but things seemed to get messy trying to create a viewModel for each list, and updating it via the KnockoutJS mappings library.
I was thinking about simply using jQuery but Im not a huge fan of building out large sections of the DOM with it (it seems to get ugly quickly).
One thing I would like to avoid (and why I was looking at KnockoutJS) is I dont like writing markup in code. I like the idea of maintaining my Markup in the "HTML", and "binding" the JS data to these elements through a framework.
Also, I hope to use jQuery for all the visual "fluff", event binding, etc.
Thanks
I ended up settling on Backbone.js [1]
It seems a bit more flexible than Knockout.js in terms of the bindings. I am using Backbone supported JS Templates for building out each list level. This has required a bit of code, but Backbone is very flexible (thus the bit of code). Im sure this is possible in many other JS frameworks, but I think i've been able to make more progress w Backbone is I dont need a deep understanding of the framework/API/intricacies to make it work - the(my) code may be more verbose, but because of this its easier to piece together how everything works.
[1] http://backbonejs.org/
This is more of a partial answer, trying to tackle the concept of "maintaining...Markup in the 'HTML'". I would create a generic menu item in the HTML that can be the template for each menu item, like so:
<li id="menuItemTemplate" class="menuItem">
<span class="menuItemText"></span>
<ul class="submenu"></ul>
</li>
This would not be in a visible place on your page; it would simply be the HTML that gets inserted for each menu item. Then, when you go to add menu items, your JavaScript would be in charge of adding as many menuItem elements as you needed in your list. As far as HTML manipulation, JavaScript would only need to do things like add id or class attributes to organize or style your data, as well as add the text content of each item. A sample implementation might look like this (I love jQuery):
function loadMenuItem(text, parentId) {
// Grab the template
var newItemHtml = $("#menuItemTemplate")[0];
// Set its id to something unique
$(newItemHtml).attr("id", getNextId());
// Set the text
$(newItemHtml).find("span.menuItemText").html(text);
// Put it in the clicked menu
$(parentId + "ul.submenu").append( newItemHtml );
}
In the end, I won't be programming your project, though. I can only give you my preference. If this is going to take a good amount of time, I'd say that the best thing for you to do is to try out all of the frameworks that sound interesting (on a small scale, obviously) to get a general feeling for how you like developing DOM-transforming apps in each one. That'll give you a better idea of which you'll like more as well as introduce you to different frameworks.
Not a direct answer to the question - still it is worth to take a look at Kendo UI MVVM
MVVM using Kendo UI in three simple steps
Kendo UI Web MVVM
Understanding MVVM – A Guide For JavaScript Developers
MVVM in Kendo UI Walkthrough
Build Single Page Apps – Part 7 – MVVM and KnockoutJS
I'm about to implement a blog, and I'm pretty sure I want to go with jQuery, because I really like it.
However, when I last did jQuery, I just did plain HTML/CSS and then improved the user experience with what jQuery has to offer. Meanwhile, jQuery UI has been released, and it looks like a full-fledged user interface framework like Ext JS.
Can I benefit from jQuery UI with a rather simple website like this, or is it more geared towards web applications like GMail?
jQuery UI is quite large and seems to have lots and lots of CSS in their skins. I'm a bit worried that I would have to write/adjust tons of CSS to make the blog look like I want it to. If I did plain HTML/CSS, I would have fine-grained control over the appereance.
Edit: I'll stress again that I'm specifically wondering whether jQuery UI is intended for and useful for a simple website like a blog. It is no doubt useful for more sophisticated web applications.
Edit 2: Thanks for all your answers, too bad I couldn't accept more than one. By now I realised that jQuery UI is not like I expected a full-fledged web application framework, but rather a bunch of useful utilities on top of jQuery. I think I'll use it, if only for Draggable, Droppable and Selectable.
You don't necessarily need to write loads of CSS if you don't like the supplied styles.
The jQuery UI ThemeRoller is a very good web-based GUI for customising the look of the widgets. It then allows you to download your own customised (and minified) .css and .js files containing just the widgets you need.
I suggest that you should have a play with that first and see if you can make the demo widgets look how you'd like them before making any decision.
You can have both... I have! Where I am using widgets (datepicker) etc, I use jquery ui, besides visit : http://jqueryui.com/themeroller/ and you can customize the colours quite easily. The UI themes are recommended strongly if you use the widgets as the widgets rely on the css defined therein to move things around, for display and selection, handling rezise of widgets.
You can always build your site using html + css then add the ui theme later, as you said it will increase the user experience greatly... besides we always end up using 1 or 2 features then extend or find other suitable plugins.
As always, the answer is 'it depends'.
More specifically though, it depends on what kind of a UI you're planning on. If you find yourself coding functionality that's already there in jq UI go ahead and use it. They've got a handy theme roller plugin which will allow you to customize the skin to perfectly match the look of your site, so that is a non issue.
You might also want to include it all through a CDN (offered by google or MS) so that your site doesn't get slow downloading the (relatively) heavy initial payload.