I'd like to display a tree on a Facebook page with JavaScript. Therefore there can be no dependencies on frameworks such as jQuery or Ext which won't run on Facebook, at least as far as I know when I last worked on that platform (April 2009). Can anybody recommend a "framework-free" JavaScript/tree library? I have ported some fairly complex JavaScript to Facebook so I'm sure I'll be able to port just about any existing pure JavaScript library.
Clarification points:
I am targeting FBJS
I too can (and did) google for JavaScript/tree engines but am seeking recommendations as to which one(s)
Look at this implementation... http://www.destroydrop.com/javascripts/tree/
You didn't describe the requirements for your JS tree, so I would suggest you write one yourself. It's a relatively simple task unless you need more complex functionality.
A simple tree is just a matter of having a bunch of DOM nodes that have other DOM nodes inside them that can be toggled on and off (display block/none)
Even if you work mostly in FBML and FBJS, you can use <fb:iframe/> to render raw HTML and JavaScript without the FB munging going on.
What kind of page are you targeting? <fb:iframe/> works on canvas pages but not on a user's profile page.
I looked at the munging in FBJS. Not sure why it would make jQuery not work, but if someone has some insight, I'd love to hear it.
I do know that you probably can't use jQuery's $ due to conflicts. But that can be changed from $() to jQuery() easily enough.
I could tell you what treeview I like, but without trying it in Facebook it might fail for the same reasons as jQuery.
You really should write and test your own to get exactly what you want, and you didn't describe exactly what you want from a tree, but perhaps you could try the free version of treeview.
I've used http://sortablejs.github.io/Sortable/#nested with great success. The default UI might throw you off (it doesn't look like a tree) but when you consider mobile users this look actually works much better.
Related
I'm a beginner in Javascript and web development in general. I'm building a web app that must be highly interactiv, so most of my work is about using Javascript to make this happen.
After having already written a good chunk of code, I feel like it won't be really maintainable and it's already hard to change, because I don't think I organised my code very well.
Essentially, I'm looking to separate the code that does actions on my objects, and the code that displays my objects. I've found that the Widget Factory might be a way to do that, but I can't really understand what it does exactly.
I red lots of documentation on it, but I don't know if it will be of any use for what I want to do.
Can you tell me if it will be useful for me, and if not, what other tools or tutorials I should get my hands on to achieve this ?
Thank you
The widget factory is used to define custom jQuery widgets.
Your questions is very broad and generic to answer, since only you know what kind of objects/models and what kind of interactivity you are expecting to have between clients and the page.
In general you should create widgets when you are implementing a generic solution.
A widget is meant to be something re-usable that handles one particular think/job.
For example if you want a "rate this comment" thingy in your page were users can rate other user's comments, you would create a rate-comment widget and apply it to all your user-comment elements.
I've found a control on another webpage that I like. Assuming the site developers didn't build it from scratch, how do I determine what scripting framework and/or plugin they're using to transform and style it?
It's like a selection control of sorts in "bar form".
It's on the realtor.com site here.
I've gotten the class names used for the parent container and its children, but searching for occurances of those in the javascript docs using Opera's dragonfly didn't yield any matches. How do I find out how this is being constructed???
There's no easy way that I know of that will tell you which code did render which elements. However you can go by deduction here. First of all, is the code rendered on the server or the client? An easy way to know for sure would be to inspect the initial source of the page and check if the elements are already present. If they are, it would mean that they were rendered server-side or they already existed in the initial static document.
As far as I can tell, the search bar markup doesn't seem to be generated client-side.
However, behaviour is certainly added client-side. I went through the code and from what I can tell they seem to be using a library that's also used on http://www.move.com/
The scripts of interest would be:
http://static.move.com/getstatic/getfile.ashx?chl=rdc&typ=js&vr=7.2.0.2340&fls=core/jquery/jquery-1.7.1.min,core/jquery/jquery.cookie.min,core/jquery/jquery.validate.min,core/jquery/jquery.json-1.3,core/jquery/jquery.ba-hashchange,core/legacy/legacy-move,core/legacy/movedialog.min,core/namespace,core/utils/underscore-min,core/utils/storage-util,core/movecore,core/cookie/cookies,core/tracking/edwtracking,core/tracking/clientevents,core/tracking/dwgtracking,core/tracking/omnituretracking,core/tracking/comscoretracking,map/hashmapping,core/utils/hash-util,core/utils/support,core/utils/captcha-util,s_code,seo/_seoparagraphs,core/ui/bootstrap
http://static.move.com/getstatic/getfile.ashx?chl=rdc&typ=js&vr=7.2.0.2340&fls=nopaindoubleload4v6,core/utils/jquery.dropkick-1.0.0,search/searchview/_topsearchview,geography/didyoumean/_didyoumean,modal/_modalview,search/_propertysearchcore,search/_partialviewcontainer,core/ui/bootstrappopovertooltip,core/utils/fb_connect_util,core/utils/rc4encrypt,registration/_registrationwidget,core/ui/slider,search/facets/_facetconcepta,geography/_predictivetext,core/ui/bootstraptabs,map/mapview/_mapview,map/map,search/listview/_resultscount,core/ui/bootstrap,search/featuredhomes/_featuredhomes,search/listview/_listviewsort,core/ui/_loadingindicator,search/listview/_listview,admedia/_admedia,search/listview/_resultsperpage,fcma/_fcma,propertydetail/_freemovingquotehandler,propertydetail/leadforms/_leadmodels,core/ui/datepickr,propertydetail/_movingcalculator,search/_trackpageview,search/_tracksearch,registration/_rdcmyitemswidget,admedia/_trackingpixel,instruments,pagetophat/_pagetophat,admedia/_admediamanagercore,breadcrumb/_breadcrumb,contentmanagement/_linkingmodule
They seem to be passing module names to the getfile.ashx page. You could probably eliminate the modules that seems useless for what you are looking for, which would make the code analysis easier.
Once you retrieved the sources, you can use http://jsbeautifier.org/ to format the code.
Have a look at everything namespaced in MoveCore and MoveLib. The library seems to be broken down by modules, where the page would register the modules it needs with MoveCore.Tracking.addService.
Please note that I doubt it's actually legal to "steal" the code and I would strongly advise you to roll your own solution instead.
I have been a user of jQuery (and some of its minor plugins) for a while. The Javascript code I've developed over the years could be described best as... messy. It used a ton of global variables and functions here and there, didn't use standard ways of organizing the code, nor any design patterns whatsoever.
I am currently building the new version of a website, and I have completed doing the backend with PEAR::MDB2 and Smarty templates. The rest is just homebrew PHP with some classes.
Now I am at the point where I'll add the Javascript layer on top of the website to improve the user-friendliness of some features. (while making sure everything degrades gracefully) I want to write better, cleaner, more organized Javascript than I used to, so I did a little research. I read Stefanov's Object-Oriented Javascript to have a better grasp on some concepts I knew only loosely about (prototypes, constructors, etc.) as well. Now I'm stuck at a point where I wonder which Javascript frameworks I should use, and how to organize it all.
After conducting my research, I understood Cappuccino & Objective-J, and Sproutcore were not what I was looking for. To quote Cappucino's about page:
Cappuccino is not designed for building web sites, or making existing sites more "dynamic". We think these goals are too far removed from those of application development to be served well by a single framework. Projects like Prototype and jQuery are excellent at those tasks
So there's that. Then I found out about Coffee Script, which is more of a one-to-one "compiler" and wouldn't help me with the actual organization of my code.
I also stumbled on some articles that give guidelines:
Using Inheritance Patterns to Organize Large jQuery Applications
A JavaScript Module Pattern
I also found out about Backbone.js, Shoestring, JavaScriptMVC, Google Loader, jQuery Tools, jQuery UI. I don't really know what to do of all this... The things I know:
I don't want to invest too much time in learning something too complex, I want to keep things simple and flexible as much as possible (that is why I don't use Symfony on the backend, for example), yet clean and organized.
I want to use jQuery, the question is, what should I use with it? (that is compatible too)
Right now, I'd use jQuery and jQuery Tools and "organize" all that in a simple namespace/object literal with simple properties and methods and also, since the site is localized, I just plan on using the simple vsprintf (as I do on the backend) with key:value pairs loaded from an object literal provided by the backend. JavaScriptMVC seems interesting, but I fear it would bring way too much complexity for a project that is fairly small sized. That is where I need your advice! Thank you very much in advance.
Ok, my attempt at an answer:
There is no 'best' to way to do it. You now know what's there and I think you might have a preference for yourself for what you want. In that case, pick a framework and learn it inside-out. (sorry to burst your bubble, but each framework has a learning curve, some steep, some very easy, but in the end to use it well you have to invest in it. Just do it, you won't be sorry).
You of course have an preference for clean code, so you might take some considerations into account. You also say you have a preference for jQuery, which is fine, but there are some limitations (as also pointed out in the link provided by eskimoblood).
There are some nice lectures / and tutorials with advice on how to structure your code in jQuery:
How to manage large jquery apps
On Large jQuery apps
Essential Javascript and jQuery patterns (free ebook)
Some style guides:
Jquery core UI Styleguide
Google Closure Javascript Style Guide
Tools for checking your code
JSLint
JSHint (a more forgiving/practical fork)
Closure Linter (haven't tried it yet, but intend to)
Standard works (javascript)
Everything by Douglas Crockford
Quirksmode
There might be more.. perhaps more people can contribute, but I also think that you've almost reached the end of what you can learn before getting your hands dirty. Many of these guides are written in a very generic way, but the interesting thing is that javascript is called upon in many specific situations. It might be useful to just post some of the code that you regard as "messy" and we can help you figure out how to do it better. Good luck!
You should watch the video and read the links in this article and then you should ask yourself again if jquery is the right tool. Maybe you will use dojo, that is much better for larger projects or you take a look at backbone and where you can stay with jquery. After all both of them are more "javascriptish" then something like sproutcore, cappuciono or even GWT. And also much easier to understand when you come from jquery.
One framework that is to consider is definitely ReactJS from Facebook. This framework is pretty slick in many ways.
First thing you have to know is that it is a view framework. It can be used server-side to do the pre-rendering of pages, but it really shines on client side. Since it's a view framework, it can be used with backbone or any other "back-front"-end framework.
One of the main point of React is its rapidity. It keeps a virtual DOM in memory and virtualize all the webpages events. So the virtuals event are used to keep events browser agnostics.
The virtual DOM kind of make programming a dynamic site as if you were programming an old static website. You can just shoot the whole HTML to render to the view engine (as if you were "re-rendering" the whole page) and it will manage the DOM operations. It does a diff between the new virtual DOM and the current virtual DOM and only inserts nodes that needs to be inserted. This way you reduce the number of DOM ops and thus increase your render speed by a lot.
A good place to start is this tutorial which shows how to use "Flux" (the web flow designed by Facebook for its site) in order to realize a Todo application!
I'm new to javascript (functional programming is okay for me, though) and I am wondering how jQuery got away with some of the design decisions they made. Is it just too much work to fix now or what? For instance, there seems use of strange symbols in strings when accessing elements in the DOM or weird function definitions for $, that are forcing me to check references every other time I want to get some basic data.
Can someone point me to a learning source where I can learn all of these nuances of jQuery (jQuery's examples just don't cut it, they're too spread out)? Maybe someone has a super good reference site/pdf for jQuery?
Thanks
EDIT:
And as a side point, in regards for learning, why the heck is the entire jquery.js file collapsed onto a single line? It is unreadable.
Try reading jQuery in Action, it's a really good book to get started with jQuery. Next to that you can also watch examples on jquery.com, but I did prefer the book to get started.
For JavaScript basics you can try w3schools.
In the beginning I had the same problem with the $ functions etc, but after I read the book it became all clear to me, and to be honest, I wouldn't use plain JavaScript without jQuery anymore for DOM manipulation.
For your edit: you have a compressed (or minified) version, which has all code on 1 line, most spaces removed etc to keep it small and a readable version. Both files can be found on the download page from jQuery.
The strange symbols you refer to are mostly CSS selectors, the standard way to address elements on the web. jQuery could've come up with its own conventions, but decided to go with what was standard and best known.
jQuery itself is surprisingly consistent. Once you wrap your head around the jQuery style you barely have to consult the documentation; things just work as you'd think they should.
The jQuery documentation is actually quite good and includes an example with every command. It also has a large user base, so a quick search will generally answer any questions you have. Google is your friend.
I'm guessing the issue is not jQuery, but a difference in javascript style compared to languages you're more familiar with. Watch Crockford's "Javascript: The Good Parts" for a reasonable introduction to good javascript style.
http://video.yahoo.com/watch/630959/2974197
Also check out Dustin Diaz's posts, I found his early screencasts where he'd build an app and talk about what he was doing very educational:
http://www.dustindiaz.com/
I think jqapi.com is a more useful jQuery API documentation resource than jquery.com
Compressed javascript uses less bandwidth to load up, and decreases load times. Use js beautifier to expand it.
jQuery is the greatest thing to happen to the DOM API, which is just awful to deal with. It also handles cross-browser issues and older versions, giving them functionality they otherwise wouldn't have.
The strange symbols in selectors are from CSS, not the fault of jQuery. The selectors API is now being built into browsers, so it's worth it to understand what they mean.
As for a functional programmer every imperative language is probably a failure in your eyes and mindbending to capture, with javascript and jquery probably on top of that list. They both have side effects all over. Jquery is really about manipulating the DOM so the side effects are the means and the goal, as opposed to proper functional programming.
If you're young enough you can still make the mind switch though :-)
start on jQuery Docs Main page...
You could try some other JavaScript frameworks to find out which one suits you best.
Although jQuery is pretty cool for most people, it's not the holy grail for everyone.
Maybe it's just not "your thing".
Duplicate: Which Javascript framework (jQuery vs Dojo vs … )?
I am totally new to JavaScript, but I want to implement Ajax features into my website. Which JS framework should I learn? Please recommend or which one you are using and why you use it?
jQuery is currently extremely popular, so you're probably going to have the most luck finding recent tutorials/plugins/etc for it, as opposed to one of the other frameworks. That's probably a fairly good selling-point from the perspective of someone new to this.
Microsoft apparently blessed jQuery, so for now that's your best bet.
I'm currently writing a paper on JavaScript frameworks. After all the research I've done so far, I can tell you this...
Seriously, nobody can tell you which framework is best for you. There's only one way to find out: try playing around with all the different libraries you're considering. It's a matter of personal preference.
See this excellent JavaScript Library Overview, a presentation by John Resig (who happens to be the lead developer of jQuery). It contains small code samples for all the listed frameworks. After viewing those, you'll probably know which framework to choose, depending on which coding style you prefer.
Also, this SO topic might be of interest.
Jquery is probably the best of the lot, it actually lets you "do more, write less"
One more for Jquery..Awesome plugins!!
Built in intellisense for jQuery in VS2008 (sp1 I think?) was one consideration for us, but essentially we've played with mootools, prototype, scriptaculous and jquery, and have found jquery to be the easiest for us all to understand/support.
We have a mixed team here, and even our business logic guys can pickup the logic/approach in jquery.
We also use telerik controls, and they've now announced more support for jquery - it certainly seems its star is in the ascension.
Try all of them, but if you're from a .net background, I think it's the logical choice at the moment.
I use jQuery now because it is easy and has lots of features. Before I was using prototype and scriptaculous.
I noticed Dojo wasn't included on your list. It's a framework that's geared to heavy-weight AJAXified pages.
http://dojotoolkit.org/
That said, JQuery appears to have the most momentum at the moment, and other frameworks (like Dojo) are working on putting more JQuery-like functionality into their product, so I would recommend learning that.
Im having a really good time with jQuery myself. Thers lots of good documentation and tutorials for it, which is excellent if your new to Javascript.
If its only the ajax features your after I recommend checking out http://docs.jquery.com/Ajax . Also the tutorials at Themeforest is really brilliant. For example the jquery tutorial for absolute beginners day 10 is showing you the basics of jQuery + Ajax.
FORK Ajax. It does the job well, and it's very small (5KB minified) and simple.
I'll plug Mootools. Of course the reason anyone prefers any of these over another is "I started using XYZ first."
jQuery is my go-to framework of choice, but you really have to look at each ones' strengths and see how they align with your project
The important thing is, use a framework -- really any framework. The benefits of using a framework, no matter which one, are so enormous. The best ones get rid of all or most of the cross-browser headaches you are bound to experience.
The best thing to consider is what you want the framework for. jQuery was designed to make manipulating the DOM easier. So if that is the main focus of what you want to be doing, then great. It is a super rad framework and it is really is amazingly natural and easy to pick up.
That having been said, it is worth considering what the others have to offer. Other frameworks like prototype and mootools are most interested in turning javascript into a more powerful programming language with richer object oriented programming capabilities and functionality for arrays, strings and numbers. I don't know enough to be able to compare/contrast prototype and mootools, but maybe someone else could fill in on that.
This is a great article that explains the difference between mootools and jquery - jqueryvsmootools.com/
The good news is that you don't necessarily have to decide. Although you might occasionally come up with bugs, you should be able to use jQuery with either mootools or prototype (see here). Basically just call jQuery.noConflict(); before any script on which you want to use jQuery and everything should work just fine. This allows you to use jQuery for all of it's slick DOM manipulation and rad UI library while also giving access to a more powerful framework when that is what you need.
Please let me know if I've missed anything here and I hope this helps.
When I was new to JavaScript, after a week I found out that life is much easier with a framework. Anyway, I did not even knew, what exactly they are for; I've got some glue about $() that it's a smart replacement for window.getElementById(), and I assumed that there are some other comfortable methods for other purposes, like AJAX request.
I did not wanted to spend lot of time on learning a framework, so I was decided that I will choose that which I fall in love first sight. Then I was spending about a whole month with googling. I have not missed any of the "big names", but I dropped them soon. The main reason of the dissatisfaction was their site, the documentation: after reading a whole page of text, I was yet as dumb as before. What is it for? What they do? What is the input, what is the aim, what is the output?
Then, I found DOMAssistant. It's small, perfect, and well-documented. Just take a look on the first paragraph of the opening page, it's a totally clear definition of the JS framework:
What is DOMAssistant?
The idea of DOMAssistant is to provide
a simpler and more consistent way to
script against the Document Object
Model (DOM) in web browsers. The idea
is that everything starts with the
element(s) in question, selected
through id or CSS selectors, and then
perform various methods on it, such as
adding or removing classes, events
etc.
So, I say, if you finally choose another, more fashionable framework, DOMAssistant is a must-to-see. And if you have no need for animated flying windows, it's also a good choice.