I'm trying to build a Handlebars app using only JavaScript. I've noticed in there documentation, they initialize using:
var source = $("#entry-template").html();
Is this step required or is there a way around it using only native Javascript?
No, it doesn't require jQuery.
Only reason why people prefer jQuery is because of ease of use with which jQuery perform various operations. It saves lots of time & additional effort.
Using handlebars with plain javscript will require some extra effort. If you have enough time then you should try out things with plain JavaScript.
Below given links might be of some help to understand things better -
http://code.tutsplus.com/tutorials/handlebarsjs-a-behind-the-scenes-look--net-32678
http://www.raymondcamden.com/2012/04/19/Demo-of-Handlebars-and-why-you-should-consider-a-templating-engine
No. If you read the example further you would see they are only using jQuery to get the HTML content of an element. This is something that could have been done in vanilla JS. Any code that follows is not jQuery. The following is the same example sans jQuery. As you can see the way Handlebars is written is unaffected.
var source = document.getElementById("entry-template").innerHTML;
var template = Handlebars.compile(source);
Related
Is there any dom api for node.js in which I can use simply JS commands? I would like to avoid using jQuery cause I already get code in JS.
If I remember correctly you can use JS code with jsdom module. By default it code example has:
var $ = window.$;
(to use jQuery) just change it to:
var document = window.document;
and you can use some JavaScript code like:
document.getElementById('yourid');
There is no jQuery to JavaScript converter cause jQuery is JavaScript. Everything you write in jQuery you can write in JavaScript - of course some of the code will be more complicated/bigger - thats why jQuery was invented (simpler code with good browser support).
Can somebody please explain the pros and cons for below.
Am having a function to get the url querystring parameters, but I need to know which is the best way to write the function. Eg: if i create the function using jquery plugin style, then every time I need to use a target element to access the function as below
$("#targetDom").getQueryString("name");
However, if I create the function using javascript classes or javascript design pattern, it would be
getQueryString("name");
This is a small example but considering large application which approach is best? is there any disadvantage in going with jquery plugin way?
Regards,
Navin
I found a while ago this sentence:
Don't learn jQuery. Just use it.
It's one of the best advices for a newbie, I think.
jQuery is just an addition to javascript. It simplifies DOM traversing/manipulation, makes easy event handling and so on, but it is not something you should start learning before you know vanilla Javascript.
Regarding your example, it is not the best thought example for jQuery plugin.
The syntax you suggested ($("#targetDom").getQueryString("name");) implies that you treat URL query string as attached somehow to the HTML element, which is wrong...
All, I am working on a highly interactive web application which will need a lot of jquery or js code, And I'm finding that my code is becoming a little hard to maintain and is not all that readable. Sometimes even the author can't find the specified code.
So far what I had done for the clear code is below.
One js component in one js file .(for example. CustomTab.js is a tab component in my app.)
Using the templete to generate component HTML based on JSON.
Using Jquery UI.
Unobtrusive JavaScript.
Is there any other points I need pay attention? Anyway, Any suggestion or recommend technique for making js library/framework easy to miantanance is appeciated, thanks.
I could suggest you to use module pattern together with RequireJS to organize your JavaScript code. For the production you'll be able to use RequireJS optimizer to build your modules into one JavaScript file.
Also if you're expecting that your client-side application will be huge, consider to use some JavaScript MVC framework like Backbone.js together with the server-side RESTful service.
I use this namespacing pattern for my libraries:
MyLibrary.ListView.js:
var MyLibrary = MyLibrary || {};
MyLibrary.ListView = {
doSomethingOnListView: function() {
...
return this;
},
doSpecialThing: function() {
...
return this;
},
init: function() {
// Additional methods to run for all pages
this.doSomethingOnListView();
return this;
}
};
Whichever page needs this:
<script type="text/javascript" src="/js/MyLibrary.ListView.js"></script>
<script type="text/javascript">
$(function() {
MyLibrary.ListView
.init()
.doSpecialThing();
});
</script>
You can even chain methods if a certain page requires an additional function.
This is exactly the same question which I ask myself each time. I think there are few ways to get easy maintaining code.
Contribute in javascript opensource projects and understand how they solved that problem. I think you can gather some unique solution from each project and common part of projects structure will answer to your question about maintenance.
Use prepared solutions like backbone, knockout, ember or angularjs if I am not mistaken angular doesn't give you structure but provide you powerful tool for creating pages with less code. Also check todomvc for ready-made solutions.
Read books and try to create some structure for your needs. It will be difficult and long but result (maybe few years later :)) will be awesome.
Currently I'm also working on a JS framework for my company. What I'm doing is I use OOP elements for JS. In other words I'm implementing similar code to C# libraries(not that similar, simulating will be the correct word). As an example in C# you use Microsoft.Window.Forms, so I can use JSOOP and use method extending and overriding to create the same scenario. But if you gone to far in your project converting your JS code to JSOOP will be time consuming.
use JSLint, this will validate your code and bring down to a readable, script engine friendly code. Though JSLint is very strict so you can use JSHint also.
using seperate file for each component is a good idea I'm doing it also.
If you like you can download the jQuery developers version and you can have a general idea how they created the framework. I learned lot of thing looking at jQuery framework!
I am creating a web app that requires me to render new elements on the page many, many times. It is getting out of hand for me to add HTML by putting it into a Javascript string. Mostly because it's hard to edit it especially when it spans multiple ways. What's the best solution for this? And what's the best way to organize this stuff because I feel like I am going to have a huge page full of JS "subelements".
There are a huge number of JavaScript templating engines available. Some of the more popular ones include:
Mustache
Handlebars
Underscore
jQuery.template
Most work by compiling your template text into a function that can be called with an object containing the data to be interpolated.
For example (using underscore.js):
var myTemplate = _.template("Hello <%= person %>");
alert(myTemplate({person : "egidra"}));
Here is a link about linked.in and templates.
I would use a js template engine. So no need to use html strings in the js. Look at the documentation of the templates. They all explain the use very well.
You can try something like http://handlebarsjs.com/ or http://mustache.github.com/.
When building webapps with MVC web framworks like Django, Kohana, Rails and the like, I put together the application without JS-driven components initially, and then add them afterwards as "improvements" to the UI.
This approach leads to non-intrusive JS, but I don't have a good "standard" way of how to go about organizing the JS work. Most of the JS I write in apps like these are 10-30 line JQuery snippets that hook into some very specific part of the UI.
So far I often end up inlining these things together with the part of the UI they manage. This makes me feel dirty, I'd like to keep the JS code as organized as the python / php / ruby code, I'd like for it to be testable and I'd like for it to be reusable.
What is the best way to go about organizing JS code in a setup like this, where we're not building a full-blown JS client app, and the main meat is still server side?
I am also very interested in what other people have to say about this. The approach I've taken is to use object literal notation to store the bulk of the function, and store these in one file included on all pages (the library)
uiHelper = {
inputDefault:function(defaulttext){
// function to swap default text into input elements
},
loadSubSection:function(url){
// loads new page using ajax instead of refreshing page
},
makeSortable:function(){
// apply jQuery UI sortable properties to list and remove non javascript controls
}
}
Then I include a .js file on any page that needs to use the library that ties the elements on that page to the function in the library. I've tried to make each function as reuseable as possible and sometimes the event binding function on the page calls several of my library functions.
$(document).ready(function(){
$('#mybutton').live('click',uiHelper.loadSubSection);
//more complicated helper
$('#myotherbutton').live('click',function(){
uiHelper.doThisThing;
uiHelper.andThisThing;
});
});
edit: using jsDoc http://jsdoc.sourceforge.net/ notation for commenting for these functions can produce documentation for the 'library' and helps keep your code easy to read (functions split by comments).
The following question is along similar lines to your own - you should check it out...
Commonly accepted best practices around code organization in JavaScript
When dealing with JS code, you should first analyze whether it will be used right away when the page loads. If it's not used right away (meaning the user must do something to invoke it) you should package this into a JS file and include it later so the load time is perceived faster for the user. This means that anything that the user will sees should go first and JS related to the functionality should be imported near the end of the file.
Download this tool to analyze your website: http://getfirebug.com/
If the JS code is small enough, it should just be inline with the HTML.
Hope that helps a bit.
For quick little user interface things like that I put everything into a single javascript file that I include on every page. Then in the javascript file I check what exists on the page and run code accordingly. I might have this in UIMagic.js for example. I have jQuery, so excuse those jQuery-isms if they aren't familiar to you.
function setupMenuHover() {
if ($("li.menu").length) { // The page has a menu
$("li.menu").hover(function() { ... }, function() { ... });
}
}
$(setupMenuHover);
function setupFacebookWizbang() {
if (typeof FB != "undefined") { // The page has Facebook's Javascript API
...
}
}
$(setupFacebookWizbang);
I've found this to be a sane enough approach.
My preferred method is to store inline javascript in it's own file (so that I can edit it easily with syntax highlighting etc.), and then include it on the page by loading the contents directly:
'<script type="text/javascript">'+open('~/js/page-inline.js').read()+'</script>'
This may not perform well though, unless your templating library can cache this sort of thing.
With Django you might be able to just include the js file:
<script type="text/javascript">
{% include "js/page-inline.js" %}
</script>
Not sure if that caches the output.
If you are still worried about being 'dirty', then you could check out the following projects, which try to bridge the server/client side language mismatch:
http://pyjs.org/ (Python generating JavaScript)
http://code.google.com/webtoolkit/ (Java generating JavaScript)
http://nodejs.org/ (JavaScript all the way!)