Relatively new to WordPress development. I am creating a new custom theme from scratch and would really like to just write vanilla javaScript without slowing things down with all the bloat of jQuery. I was thinking I could just simply dequeue jQuery.
Would this break anything behind the scenes for WordPress to function or is there no dependency?
jQuery is unlikely to slow you down as it's simply a bunch of optimized DOM selectors/DOM methods/utility functions.
You should be able to proceed with Vanilla JS unless any plugin or library you are using depend on it.
Yes, in theory jQuery will add to the download, but not as much as you think. jQuery gets loaded once if you set cache properly, all following pageloadfs, jQuery gets laoded from cache. If you use a CDN like Google's, big chances that your visitor already has it cached because they loaded it on another page. The parts of jQuery which you don't use, don't activate, they're smart like that.
Also, jQuery fixes some cross browser behaviour which you don't need to worry about and it offers a lot of functionality makes things a whole lot simpler, allowing you to focus on more interesting stuff.
TL;DR: jQuery will save you a much time building code, with(imo) a very minor cost. I do recommend using native JS when relevant, e.g. when you want a href of a clicked anchor: this.href.
Another way is to use the WP-JSON API plugin (comes with WP since 3.7 i think) and build your WP-site as a SPA using React/Vue/Angular/Whatever.
If you choose to go that route you wont have any bloat caused by anything but yourself. Always test your code. I personally like Vue.js, proper open-source framework, works like a charm for WP-development
Check this link out: https://snipcart.com/blog/reactjs-wordpress-rest-api-example
Related
I'm quite impressed with the slider that is used with one site - lumosity. [http://www.lumosity.com/app/v5/personalization/attention] and I'm keen to replicate the slider that slides in part of the questions - however is there an elegant way to do this without recourse to jQuery? Ideally I'd like to not use JQuery and employ a much simpler way of doing things - can anyone recommend a workaround?
I'm using Django for the serving, so I'm trying to keep my pages as simple as possible. I know I could use JQuery, but is there another way to do it?
I.e.
Native within Django?
Not using jQuery?
3rd party Django add-ons that would work with Google apps.
The site is here:
http://www.lumosity.com/app/v5/personalization/attention
and the effect occurs when you click "Next"
You can do animation purely with CSS, but you would still have to trigger the animation you want client-side, unless you're doing something on page load, or another event that can be triggered automatically.
Django, being Python code running on the server-side, doesn't have a way to interact with client-side code, unless you're making a request, be it a GET, POST, PUT, etc, via an Ajax call.
Nothing says you have to leverage jQuery. You could do all the same functionality using vanilla JavaScript. However, jQuery and its ecosystem of plugins, can give you a huge productivity boost, and when loaded from a CDN, is going to add a negligible amount of weight to your view/site.
First post, but I've been lurking around this site for a long while now, and I know how good some of you guys are at this development game.
So, I'm trying to figure out how to develop a gallery/mainnav widget for the top of a landing page, but the page cannot include the jQuery library or any flash objects. I haven't explicitly checked yet, but I don't think mootools will work either. Having said that, I am by far most familiar with building stuff like this using jQuery than any other libraries out there right now, so having had that taken away is proving a difficult obstacle for me.
I'm looking for ideas/suggestions/direction on possibly trying to build something like this using a canvas element (my canvas skills are not that well developed yet, fyi) or if a pure-javascript solution is available somewhere... or really any input that I may not have considered yet.
Thanks guys.
You're probably conflicting with another library, in which case you can use jQuery in .noConflict() mode.
Developing something so UI-heavy without jQuery or some other framework is really not advisable. It will likely take much longer to build, with much longer and less maintainable code that works across fewer browsers.
i want to use the mootools library to do animation & ajax in a widget i'm building.
i plan to have the widget write itself into the page so the end user just deploys a single line of javascript.
i'm concerned about the compatibility issues that may arise if my widget is used on a page which is already using another library.
short tests show problems even when enclosed in a self executing function if scriptaculous is already loaded, although jquery doesn't seem to cause a problem.
what is the best solution to this?
is there any way to load mootools in isolation so i can just use it for my purposes?
i see that jquery, whilst unfamiliar to me, is highly namespaced and therefore probably more appropriate to the task, would using that instead alleviate any potential problems?
can i just copy and paste mootools into my self executing function?
nb: the following error when using with prototype comes as a result of using mootool's setStyle method.
element.style is undefined
element.style.cssText += ';' + styles;
There isn't a method to use mootools. The developers have specifically stated that they are not going to namespace mootools to run along side prototype and they squash any attempts to have the core changed to do it (see 1).
You really are just better off using either jQuery or another namespaced library (I believe both Dojo and YUI are, but I could be mistaken), or if you don't need the overhead, just build your own in good old-fashion JS.
https://mootools.lighthouseapp.com/projects/2706/tickets/219-mootools-namespace
you cannot "namespace" mootools. it is a prototypical library. you seem to indicate that you are trying to use it in conjunction with prototype - which is STILL a prototypical library as of time of writing (there has been talk of them moving away from that).
basically 2 such frameworks alongside of each other will have completely unpredictable results, there are no guarantees on what library's method will take precedence on any of the prototypes that they change.
mootools can co-exist happily with jquery or any other lib that is functional. it also looks for anything already defining $ and if unavailable (say, because $ === jQuery), it reverts back to using document.id() instead.
if your page already uses scriptaculous, then you should do the effects using that (in an ideal world). next-best-thing, you can try jquery but that's nasty for the sake of a simple widget (or any 2 frameworks)
btw, the AddThis widgets used to contain mootools a while back and it did not break any pages it got embedded on so I suppose it is doable. regretfully for you, they seem to have moved to their own vanilla lib now...
jQuery and similar libraries provide a number of useful APIs for DOM traversal and manipulation. Where your site as high number of repeat visitors, their use is easily justified as caching will offset any bandwidth cost to the end user.
In other cases visitors to the site might always be unique and thus the bandwidth penalty for these libraries can be too severe relative to the benefits for a development team.
Are there any libraries that provide this style of DOM interaction while allowing you to choose the parts relevant to your page.
For example,
jQuery('#myId').addClass('error');
and many other APIs in jQuery can be replicated in a few lines of code, thus avoiding ~50kB of downloads.
So the question is, does a library exist that contains these functions with little dependency on other aspects of the library or will I need to create them myself as necessary?
Are there mechanisms/tools available to break down existing libraries like jQuery into their minimal components?
As discussed here, if you use google as a host of the libraries, the user probably already has it cached before they ever get to your site.
This page shows you which libraries are supported. Currently:
jQuery
jQuery UI
Prototype
script.aculo.us
MooTools
Dojo
SWFObject New!
Yahoo! User Interface Library (YUI) New!
I'm all for rolling your own, but be sure you know all the bugs of all the browser versions if you don't use a library.
Not a bad idea, though. It would be nice if you could create a custom version of jQuery. I'd especially like one for iPhone's Mobile Safari and Adobe AIR that stripped out all the non-webkit stuff.
The production version of jQuery is 19k, same as a rather small image. Not a severe bandwidh penalty in my book!
Edit: ..and worth every k, too.
MooTools allows you to download only the pieces you want. So if all you want is enough for JSON AJAX requests, you've got it.
http://mootools.net/core
Check out Sly. Only 3kB.
Sorry guys I somehow lost the page in which one was asking about JS libraries conflicts solution.
I had the same problem but now I solved it after playing around with some JQuery scripts. I know it is a bit pain in * but lets do it step by step.
First of all let me tell you that in my project I am using two different libraries. I am using Lightwindow and JQuery. I couldn't make both of the libraries function properly BUT I came up with the following script. You have to use this script within each function that is meant to be using the JQuery functions:
//This line says, that dollar sign $ is belongs to the JQuery library.
jQuery(document).ready(function($) {
//Your source code goes here.
});
Lets use it in little bit detailed. In my scenario I am having a click button that suppose to call the following function:
function popups(message, heading, actionlink, linkName) {
//This is the LINE that tell the rest of the source code
//to recognize JQuery functions.
jQuery(document).ready(function($) {
// get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
// assign values to the overlay and dialog box
$('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
$('#dialog-box1').show();
// display the message
$('#dialog-message-row').html(message);
$('#dialog-message-heading').html(heading);
$('#dialog-message-actionlink').html("<a onclick=function('x') class='button' id='delete'>"+linkName+"</a>");
});//CLOSE JQuery translator
}
I want to create a draggable and resizable window in JavaScript for cross browser use, but I want to try and avoid using a framework if I can.
Has anyone got a link or some code that I can use?
JQuery is more focused on a lot of nice utility functions, and makes DOM manipulation a whole lot easier. Basically, I consider it to be Javascript as it should have been. It's a supremely helpful addition to the Javascript language itself.
ExtJS is a suite of GUI components with specific APIs... Use it if you want to easily create components that look like that, otherwise, go with a more flexible framework.
JQuery would be a good way to go. And with the Jquery UI plugins (such as draggable), it's a breeze.. (there's a demo here).
Not using a framework, to keep it 'pure', seems just a waste of time to me. There's good stuff, that will save you tremendous amounts of time, time better spent in making your application even better.
But you can always check out the source to get some 'inspiration', and adapt it without the overhead of the stuff you won't use. It's well done and easy to read, and you often discover some cross-browser hacks you didn't even think about..
edit: oh, if you REALLY don't wan't no framework EVER, just check out their source then.. sure you can use some of it for your application.
Sometimes you can't choose your environment or architecture, so you're stuck working within constraints like not being able to use frameworks...
Avoiding a framework altogether will leave you with lots of code and a bunch of tedious browser-testing.
If you would consider a framework I'd suggest jQuery with the jqDnR plugin. I think it will solve your problem or perhaps you could combine the functionality of the jQuery draggables with the jQuery resizables
Just trying to avoid large framework downloads to the client for one very small thing, perhaps I am being daft.
I had looked at jQuery but also ExtJS, the documentation and UI 'look' seem far superior and professional in ExtJS ... are there particular reasons for you guys recommending jQuery?