Best practices for developing larger JavaScript applications
Having a strong background in Java/C++ i wonder if it is possible to develop a somewhat larger JavaScript application without having to cut back on quality.
Any hints are appreciated regarding:
- Development Enviroment
- Debugging Techniques
- Unit Testing
- Profiling
- Instrumentation
- System Design
- Interface Design
- Code Design
I'm also curious how projects like JavaScript PC Emulator and JavaScript Game Engine handled those issues in case some of you know.
Answer
Development Environment Well, you need a web server (depends on server-side architecture) like Apache or IIS to simulate the AJAX communication. Sometimes an editor for javascript is included in the editor of the server-side development language.
There's a interesting question about javascript IDEs: https://stackoverflow.com/questions/209126/good-javascript-ide-with-jquery-support
Debugging Techniques & Profiling Use built-in browser debugging and profiling tools like Firebug.
You can also look at this profiling tool.
Unit Testing If jQuery is used I'd recommend http://docs.jquery.com/Qunit. In the development version of the javascrit application the javascript test files are loaded. When the application is published, the test files aren't loaded.
Security
- Validate and calculate everything on server-side
- Prevent XXS
Design
Application--------------------------------
- Application Components
- Custom Widgets
Framework----------------------------------
- Base Widgets
- Base AJAX Communication
- UI Core (Helper Methods...)
The framework provides the base functions. For example a base framework is jQuery and knockoutjs. And on top of this framework the application is built. Of course you can create your own framework for your application. But when choosing jQuery for example, you mostly don't need to deal with cross-browser bugs, because jQuery makes that for you.
Communication with Server: It's a good idea to provide a RESTful Service for communicating. You also have to choose between JSON and XML. JSON is more lightweight than XML, so often JSON is elected.
Design Patterns: If the javascript application is really large, it's a good idea to implement design patterns like MVC or MVVM.
There are some MVC/MVVM frameworks outside for javascript (knockoutjs for example).
This is a really useful article about design patterns in javascript: http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/
But at the end you have to decide yourself how your application should be structured etc. The Design Patterns can show you a good way - but every application is different and not every solution works for all problems.
And don't forget that performance is a big deal when using javascript. So compressing and combining javascript files is a good idea: http://code.google.com/intl/de/speed/articles/. At this point Lazy Loading might help, too.