Recommendations for developing larger JavaScript applications

Question

Having a strong background in Java / C ++, I wonder if it is possible to develop a slightly larger JavaScript application without the need to reduce quality.

Any hints are welcome regarding:

• Environmental development
• Debugging methods
• Device testing
• Profiling
• Instruments
• System design
• Interface design
• Code design

I am also interested in how projects like the JavaScript PC Emulator and the JavaScript Game Engine handled these problems in case some of you know.

Answer 1

Development Environment Well, you need a web server (depending on the server-side architecture), such as Apache or IIS, to simulate AJAX communication. Sometimes an editor for javascript is included in the server-side development language editor.

Interesting javascript IDE question: https://stackoverflow.com/questions/209126/good-javascript-ide-with-jquery-support

---

Debugging Methods and Profiling Use built-in tools for debugging and profiling your browser, such as Firebug .

You can also see this profiling tool.

---

Device Testing If using jQuery, I would recommend http://docs.jquery.com/Qunit . The javascrit application development version loads javascript test files. When the application is published, test files do not load.

---

Security

• Confirm and calculate everything on the server side
• XXS Prevention

---

• How to make a safe game in javascript?

• AJAX Security

---

Design

Application --------------------------------

• Application components
• Custom widgets

Framework ----------------------------------

• Basic widgets
• Communication with the AJAX base
• UI Core (helper methods ...)

The structure provides basic functions. For example, the basic structure of jQuery and knockoutjs . And in addition to this structure, the application is built. Of course, you can create your own infrastructure for your application. But, for example, when choosing jQuery, you no longer need to deal with cross-browser errors, because jQuery does this for you.

---

Server Communication: It is a good idea to provide a RESTful Service for communication. You must also choose between JSON and XML. JSON is lighter than XML, so JSON is often chosen.

---

Design Patterns: If the javascript application is really large, it is recommended that you implement design patterns such as MVC or MVVM.

There are some MVC / MVVM frameworks for javascript ( knockoutjs ).

• http://www.alistapart.com/articles/javascript-mvc/
• Funny drawing

This is a really useful article on javascript design patterns: http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/

---

But in the end you have to decide how your application should be structured, etc. Design patterns can show you a good way - but every application is different, and not all solutions work for all problems.

And don't forget that performance is a big deal when using javascript. Therefore, compressing and combining javascript files is a good idea: http://code.google.com/intl/de/speed/articles/ . Lazy Loading may also help at this point.

Answer 2

I participated in writing a large JavaScript application with SproutCore and Cappuccino and without any "macro programs". That's what I think:

First of all, the same principles of “good design” that you acquired in your work with Java still apply: do not write spaghetti code, encapsulate individual problems and use MVC.

A lot of people start writing a web 2.0 or web 3.0 application (whatever that means), just add jQuery to it and go down the path of pain and suffering, as their code becomes more and more and completely invisible,

Large frames such as Cappuccino or SproutCore will help you avoid this. Cappuccino is great for desktop applications, while SproutCore has shifted its focus from 2.0 to “web-style” applications like New Twitter, while still providing you with great ways to structure your applications and your code.

Now for your specific areas or interests:

Environmental development

I personally use MacVim. I heard well about Cloud9IDE built into the IDE for JS development. For Cappuccino, you can use the Apple Xcode IDE, even for developing user interfaces (which is very cool).

Both Cappuccino and SproutCore applications can be tested directly in the browser without the need for a web server. If you need to talk to the web server (which you probably want), Ruby on Rails or node.js are usually used to quickly launch the backend.

Debugging methods

Debugging is still a kind of painful place when it comes to JavaScript development. Google Chrome Developer Tools are the best at the moment. You can set breakpoints directly in the browser and all sorts of neat things. This is the tool you want to use.

Device testing

SproutCore uses QUnit, Cappuccino comes with OJUnit / OJSpec. Then there are projects like JSDOM and env.js that allow you to simulate a browser on a server and give you an environment to run automated tests without a browser.

Also projects like Selenium or Jasmine are worth checking out.

Profiling / Tools

You can perform profiling using Chrome Dev tools . YSlow is great for general profiling web applications (including asset loading, etc.).

System design

Use MVC from get-go. Many people start with a small application and add JavaScript here to read the value from the field and some more JavaScript to update the label. They do it again. And again. And dinner is served: spaghetti code. Use a framework like SproutCore or backbone.js to prevent this and structure your code.

This is a great tutorial for SproutCore , this is one for the .js trunk .

The same goes for Cappuccino, here is a tutorial that I wrote about a year ago . It is a bit outdated, but gives you a general idea. Here's the last demo I made for an article I wrote for MacTech magazine in May.

So structure your code like you would in any other development environment. Perhaps read this book or this book . These videos are also a great resource .

Interface design

For Cappuccino, you can use the Apple Xcode Interface Builder to graphically display the user interface. For most other systems, you will create your own interface with standard HTML and CSS.

If you want to develop for mobile, you should read this article .

Code design

Check out the books and videos I mentioned above. And consult this general coding style . Naturally, people do not agree with some aspects of the style outlined on this page, but this is a good starting point.

JavaScript is an exciting development environment and it has a very vibrant community! You have to join in the fun! I hope my opinions were useful to you.

Answer 3

About the tools:

• JSLint is an online tool developed by Douglas Crockford at http://www.jslint.com/ . This tells you why, even if probability is not possible, your code may break.
• JSMin is a single-file javascript minifier written in C. Compile it, put it in $ PATH and use it to create build scripts for your application. Miniature javascript is considered faster than the load. Get it at http://www.crockford.com/javascript/jsmin.html .
• Having a JS Read-Eval-Print Loop is always convenient. The busiest is node.js , REPL based on V8, JavaScript javascript engine. This allows you to interactively test javascript snippets. It also functions as one of the most powerful web servers through the witty event-loop system. You are encouraged to use it that way!
• Greeting JS is good, but you need a great web inspector . It provides wide debugging and a better understanding of your code. In this area, both Google Chrome and Firebug are considered top-notch. The difference is that Google Chrome is built-in. Right-click> Verify and you're done.
  But the best features there can be found in this colorful cheat text .
• JSFiddle is an online fragment testing tool.
• @mathias proudly supports jsPerf , a set of elements that test JS fragments and can tell, cross-browser, which algorithm is the fastest.
• YSlow is another really accurate tool to tell you if your site is fast and how you can improve it, with witty tips.

As for the IDE , there is no single development environment that will be more efficient. The best people in this area use only the text editor that they like best (@phoboslab, the person behind ImpactJS uses KomodoEdit , for example. Paul Irish uses TextMate, which is good, but only for Mac. Many people use Vim. Fabrice Bellard , the guy behind JSLinux uses his version of Emacs, I think it doesn't matter a single bit).

Unit testing is important, but it is never a problem. Javascript is powerful enough so you can create more suitable multi-line module testing software than anything out there. The important thing is that thanks to node.js (the JS suggestion I recommend above), you can automate these tests by placing them in a * .js script file and running all the tests with a single line: $ node test.js

What is really considered effective is the presence of mdn javascript documentation under the pillow, and the html specification is always open. Keep in mind that the version I am pointing to you is not widely known, but it is by far the best! It even uses a cache manifest so you can re-read the pages you already loaded when you are offline! Not to mention the outstanding search feature!

And now, since I really want this award, I will give you one excellent page that lists all the documentation that you will ever need to create a web application . This is truly a jewel. It contains a link to all the necessary information. This is an index of all bibles.

In the end, the question that really aims at what you are interested in is - can you make a huge application in javascript?
The answer is yes. Javascript does have what Crockford calls the "bad parts", but using JSLint warns you about them. Javascript, on the other hand, has powerful weapons:

• Closure: you can define a function inside another function and it will have access to ouside variables even after the external function has been executed.
• First-class functions: you can create arrays of functions, pass functions as parameters to other functions, return a function from another function, it's all free!
• Object literals, array literals: this is the foundation of JSON. It is very easy to use. All javascript engines now have a built-in JSON.parse(aString) and JSON.stringify(anObject) .
• Prototyping: objects can be inherited from any variable that you have already defined.

This makes the work efficient and easy. There are several specific templates that can be used in Javascript. I will let Paul Irish enlighten you .

Last tip when using javascript in a browser: never use <script>/* some javascript here */</script> . Always use <script src="javascript-file.js"></script> .

And a few more links.

• http://my.opera.com/emoller/blog/2011/05/01/javascript-performance or how not to fear the introduction of ZIP in the browser.
• http://paperjs.org/features/ on how far we can go now. Editing precompiled javascript on the go!
• http://brendaneich.com/2011/05/mozillas-nodeconf-presentation/ about the future of javascript.

Answer 4

You can check out Google Closing Library and Compiler . They write fairly large Javascript applications.

Answer 5

You should explore alternatives to JavaScript that still allow you to deploy in an environment like JavaScript.

Many applications for writing large applications have a whole chain of tools that allows individuals and teams to work together without having to communicate with everyone, the O (n ** 2) problem.

Things like GWT let you write in Java, so if you have a team that can coordinate Java development or another statically typed development language application, they can find the transition to GWT much easier than JavaScript. GWT also provides robust core libraries, templates, debugging in the Java-IDE, code minimization for each browser, and many other useful properties.

GWT also works with Java unit testing capabilities, namely junit , and many java teams already have experience integrating junit into continuous build systems and test panels.

Answer 6

Please note that this post is more Internet-oriented, as this is where I primarily work

Development environment

If you prefer an IDE, JetBrains has a really good WebStorm web editor, which greatly simplifies working with javascript. Aptana is another good option. Otherwise, text editors are always a great option (TextMate is my preference).

Debugging methods

The DOM browser tools mentioned above, such as firebug, are required. You should be able to declare and evaluate your code in the environment where it is used, without having to constantly save and reload.

Another point worth mentioning here is jslint , which is a rigorous test of your javascript. This is equivalent to compiler time errors and can be invaluable in troubleshooting javascript issues.

Device testing

Best unit testing framework for javascript jasmine (based on rspec style tests). Some people don't like BDD style ads, although most people using TDD accept BDD, it's just TDD done right. Personally, I believe that the BDD style helps focus people on what they are trying to test. It has extensive approval support and a lot of work has been done to handle the asynchronous nature of javascript without getting too dirty.

Profiling / Tools

Most browsers have built-in development support. Both firefox and chrome are great here. Although the toolkit does not provide large details, they can easily be used to recognize that the slow point is on your server or in your client code. This information will require more in-depth analysis, but it should just be the job of tracking and fixing the problem.

This is certainly a space that will see great growth outside of browsers with the growing popularity of nodejs .

Design (system / code / interface)

Any major javascript application will work in all the problems that any dynamically typed language will have. In addition, javascript also has a very long history, in which a lot of bad code was written and written every day. Javascript does nothing to encourage you to succeed, which is why books like "Javascript, the good parts."

On the other hand, javascript has great support for OOP, as well as functional programming (functions are first-class citizens in this language). Object literals are a beautiful combination of objects in the sense of class and dictionaries in the sense of structure. In addition, there are truly unique and unique features , and they can allow you to accomplish many powerful things.

Based on these considerations, you can apply any templates that you would use in other languages. There are many frameworks that use this. There is a large article that goes through many common frameworks for dependency management, organizing code, templates, linking modules, the build process (including minimization), and finally testing.

Creating large-scale jQuery applications

Answer 7

You can still use Java as tools when developing with JS. The company I work for has a 500K + loc application, and we use tools like Maven to work with library dependencies. We also use Eclipse to develop JS using the WTP plugin.

We use the JS Test Driver for UnitTests and selenium for AT. For degradation and profiling, we usually use Firebug and the IE debugger built into VS Web Express.

To compile the code, we use the closure of Google and the Java Servlet to serve the JS during the development process, which can load each JS file and its dependencies in an order that guarantees the existence of class dependencies.

Answer 8

Most of your questions have already been answered, but I am very surprised that no one mentioned DynaTrace Ajax as a profiling tool, since it is by far the best tool available on the market right now for profiling applications in a browser.

For debugging, you will have to rely on the built-in browser debuggers (developer tools in Chrome / Safari, the developer toolbar in IE, Firebug in Firefox), but IE + Visual Studio is still the most powerful debugging tool, very convenient from time to time.

Answer 9

This article may help in understanding the JavaScript Strategy Template.