I've been really enjoying getting into Paul Irish's HTML5 Boilerplate which gives best practices for html5, javascript, css and even server side stuff with the likes of a boilerplate .htaccess file. However, the Javascript file that comes is empty- for us developers to put in what we like.
I am wondering what Javascript plugins and scripts developers tend to use across all their sites? I want to create a boilerplate site that I start off with when I start building a new site. I tend to use JQuery, so scripts and plugins that use that would be useful.
Ideas that I have would be:
swfobject
jPlayer? (for sites that have video and audio) Not sure about this one
The Fade Anything Technique
A clear inputs script (clear any inputs when clicked)
externalLink script (open in new tab/window when class=externalLink)
Break out of frame script
The above aren't particularly good examples, but that's why I am asking the question!
underscore.js. yepnope.js.
With the latter, it would be good if you used this to conditionally load plugins. Also it could be an idea to use module patterns for this boilerplate, possibly keep it namespaced.
Hmm I am not sure if these are applicable to "all" sites. We do recommend using good JavaScript patterns, but overloading a page with plugins is something I personally do not subscribe to :)
jQuery Validate is one that I use on any site where I have forms. It has excellent capabilities out of the box and is very customizable and extensible.
This should be done in addition to validation on the server, of course; it's just to give nice, immediate user feedback.
Well It seem to be that you have confused with selecting suitable JavaScript plugins, And following a proper JavaScript pattern for coding. So what I can suggest you is to use BoilerplateJS
BoilerplateJS is a reference architecture which you can use as the base code to kick start your development. It is bundled with reliable plugins required for a complete product suite but the full flexibility to use your desired plugins is there.It follows industry recommended JavaScript design patterns. And as you have highlighted all these scripts and plugins can be used with jQuery.
BoilerplateJS source code
Great boilerplate here: https://github.com/alan345/naperg
Boilerplate for a Fullstack GraphQL App with React & Prisma
Related
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!
For the longest time I've used jQuery to hack together web sites. Now I'm interested in making a web application (one page load for the entire site to function, like Gmail).
Are there any jQuery Frameworks or practices that I can leverage to build my application so I don't have to recreate the wheel, or hack something together as I go?
Thanks
One of the (not so) many options is JavascriptMVC, which is pretty cool and I've used it for one midium-size project.
It's website is pretty discouraging, but give it a chance and watch the video. One possitive aspect is that it's creator always answers really fast in JMVC's google group.
But, actually, if I had to remake the project I mentioned, I would not use it, as jQuery provides (almost) all JMVC's functionality, you just have to get used to it. For an example in how to handle big apps with jQuery, I would recommend you to watch this video between others of Alex Sexton and other members of the yayQuery podcast.
I honestly don't know how someone could say jQuery provides almost all of JMVC's functionality. Yes, you can do a lot of similar things with jQuery, but you would have to write it an maintain it yourself.
Here's a quick list of what JavaScriptMVC provides that jQuery does not: (read more of them at http://jupiterjs.com/news/javascriptmvc-features)
Dependency Management
Building / Compression
Logging
Organized Folder Structures
Package Management
Code Cleaning
Functional Testing
Client Side Templates
A bunch of delegatable special events (drag-drop, hover, resize, etc)
A bunch of dom utilities
Language Extensions
An awesome widget factory
Documentation
Have you looked into Sammy.js? It's an mvc framework built on JQuery and is very beginner friendly. http://code.quirkey.com/sammy/
I have just been asked to describe the architecture for a large scale dashbaord style project that i will be working on.
I have bever worked on a application of this size and am a bit lost as to what to say.
Could i be pointed in the direction of any articles that may help me get started and hopefully finished.
I have gleaned the following information thus far but i am not really sure that it describes the architecture.
1) Use classes instead of seperate functions and each class or group should be contained within their own JS file
2) Prior to production there should be a compile step where said JS files are compiled and minified
3) Step2 does not have to contain all the files. Jsut the common ones to start
4) Use a classloader to load classes, plugins etc when they are needed. On research could jQuery's getScript function be used for this or even a jQuery plugin loader:
http://api.jquery.com/jQuery.getScript/
http://www.unwrongest.com/projects/lazy/
Am feeling way out of my depth at the mo so any help would be massively appreciated. Be honest, if the above is competely irrelevant then i guess i am in the wrong job :(
Everything you need to know can be found here:
http://addyosmani.com/largescalejavascript/
Create a library of loosely couple components that communicate through an application controller (e.g. event bus).
I would recommend looking at using ExtJS 4 for this. Its APIs and development methodology closely track what you would expect from .NET or Java for developing a large-scale desktop app.
Version four answers all four of your points. It has...
1) A system for defining Java/C#-like classes in Javascript that work almost exactly the way a Java or C# developer would expect.
2) Dynamic resource loading.
3) The ability to create a final product from the SDK which is a neat, compressed version which contains just what you need.
If you are to do this with pure Javascript, ensure you use some reference architecture in the job. What HDave pointed above is really good material. If you want a ready-made reference architecture as a project startup code, have a look at BoilerplateJS:
http://boilerplatejs.org
After some large-scale projects, I have compiled some of the learnings in to this framework. Look at the samples too. Some of the concerns you raised are already addressed in this codebase such as use of OO concepts, minification and optimizations, decoupled moduler design and many more too.
All of my projects include very similar tasks and quite recently I've been thinking I should write a library to handle most of the heavy lifting so I can write short, simple, easy to read code that interacts with the library to get the jobs done. Looking at other frameworks, specifically jQuery & YUI, they work in different ways. jQuery mostly seems to extend & simplify the DOM using a global object/function whereas YUI uses namespaces and modules. I understand that this is because they have different goals as libraries and each have their merits.
Most specifically, I'm looking for answers to the following questions:
Is it best to use namespaces, eg gui.scrollbar.attach(), or a global method such as $(domObj).attachScrollbar()?
Is it best to include individual parts as seperate js files or as a single js file where components are copied/pasted? I know the eBay Shopping API SDK has many .js files in seperate folders, wouldn't this suffer a significant performance hit?
Is there any other advice you would give to someone looking to create a javascript library?
I've marked as community wiki because I didn't want to risk the question being closed - I'm genuinely seeking advice here.
Thanks
EDIT
I should have originally stated that I'm not re-inventing the wheel, I'm looking to simplify many common tasks between Windows Desktop Gadgets, so I don't need the cross-browser compatibility of other libraries and their core functionality doesn't really apply to what I'm doing. I tried to keep the question general and not specifically relating to desktop gadgets, so that this question would be useful for others.
Simple answer to your question: write your library using an existing one.
I have some javascript files written in jQuery just for such purposes.
More specifically,
If you are going for java-style object oriented-ness, go for namespaces. I prefer the jquery way of writing plugins.
If you are writing your own "toolkit", it would be best to copy and paste the dependencies (minified) into your source code. This way
a. you avoid the overhead you mentioned
b. you prevent unnecessary dependencies creeping up externally.
Cheers!
Concerning your first question, the two options are really the same IMO. Instead of a global object like YAHOO or gui, you have a global function like $. In both cases you have a global variable that holds your namespace.
Is there any reason why you can't use one of the many libraries out there already? This seems like a case of reinventing the wheel. These libraries have been around for years and have already tackled many of the issues that you will surely run into when trying to write your own.
In terms of some of your questions:
This is really a matter of preference IMO. As long as you get your functions out of the global namespace that is the major thing. However, this design choice will drive many others down the line.
It is best to include all core functionality in one file and then to chunk the rest into files that are required for a bit of functionality. You want to keep the number of files down, but you also don't want the user to have to download a lot of stuff that they don't need.
Having said all that, I restate that you should look at using one of the libraries already out there unless you have a very good reason not to. Keep in mind that you will need to test in all old browsers as well as any new browsers that come out.
jQuery, YUI, Prototype, Mootools, extJS are a few of the most popular
Although I am using the Zend framework, MooTools JS library and my questions revolves around them, this is a more generic question.
I am working on a web app, in which I am using many elements which are sometimes useful on other pages (for example OpenLayers related MooTools classes).
Mootools already allows this "segmentation" by "classing" (creating "Class"..) so I feel tha the next thing to do is to have separate JS file for every class, then send a request to a PHP page with the classes I want and get in return JS file with what I need.
At the same time this mechanism will minify and gzip and cache locally on the server (for future requests) and send me back this one file.
I didnt go into design yet and was wondering if such / similar solution is out there?
Alternatively I see libraries like labJS that speeds things up by multi threading the requests, this however does not complete the solution with minification and gzip (I have to take care of this server side with another complementary solution).
Is any one using similar dynamic JS "Class" loading solution?
Cheers,
Roman
I think the tool you want to look at is the minify project. Here's a description:
Minify is a PHP5 app that helps you
follow several of Yahoo!'s Rules for
High Performance Web Sites.
It combines multiple CSS or Javascript
files, removes unnecessary whitespace
and comments, and serves them with
gzip encoding and optimal client-side
cache headers.
It's very straightforward to use, and, say you have it installed in http://example.com/min/, and you have two files to compress:
/resources/js/lib/library.js
/resources/js/main.js
You would call this url:
http://example.com/min/b=resources/js&f=lib/library.js,main.js
And the code looks like:
<script type="text/javascript"
src="/min/b=resources/js&f=lib/library.js,main.js"></script>
So basically there is a consistent URI based way to merge files together.
I'm not familiar with zend and only somewhat familiar with mootools so take this with a larger-than-average grain of salt.
Wouldn't it be easier to have a process that generates/minifies all the possible combinations of the classes you have and then just request a particular combination? You could automate this with a script pretty easily.
Also, I've used the HyperCache and WP_Minify plugins for wordpress and they do pretty much everything you are talking about so you might want to look there for inspiration.
What you describe is pretty much what the YUI PHP Loader does, although it is tailored towards the YUI JavaScript library. However, the project is open-source under the BSD license so it is a good place to get some ideas to implement your own.
Do also have a look at Lissa (which is based on YUI PHP Loader) that is a generic JavaScript (and CSS) loader.