Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript programming model to organize Web Applications

Tags:

javascript

I have been programming in PHP and C# for a long time, but I have done very little Javascript. For server side programming I use MVC, which is very nice and my code is neatly organized.

Now, for Javascript, when I write code, I usually screw things up. It becomes something like spaghetti code. I don't know how to organize my code.

Can anyone please help me with any resource, book, or anything which might help with writing neat and organized Javascript code?

Thanks in advance.

like image 387
Omid Kamangar Avatar asked Sep 21 '11 18:09

Omid Kamangar


People also ask

Can you build web apps with JavaScript?

Modern JavaScript Frameworks like Angular, React and Vue. js makes it very easy to build complex single page web applications. However, using a those frameworks is not mandatory and you can also go with plain and pure JavaScript.

What is the use of JavaScript in web development?

JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, ...

What web applications use JavaScript?

Web ApplicationsAngular and Vue. js are popular JavaScript frameworks that developers make use of during app development. Netflix and PayPal were developed with AngularJS and APIs. An application programming interface (API) is a protocol for accessing web-based software.


2 Answers

You mention that you have been programming in PHP and C# for a long time. Take your code organization experience and apply it to your javascript.

Couple of frameworks

Google's Closure tools -

http://code.google.com/closure/

If Google uses it to organize Gmail and Google Docs, then it should work for most large applications.

Also, Yahoo! YUI is good too -

http://developer.yahoo.com/yui/

http://yuilibrary.com/

And backbone.js (not as "big" as Google or Yahoo) -

http://documentcloud.github.com/backbone/

https://github.com/documentcloud/backbone

Decent Book

For me, writing javascript unit test helps me stay organized -

Test-Driven JavaScript Development

http://www.amazon.com/Test-Driven-JavaScript-Development-Developers-Library/dp/0321683919/

like image 99
Kris Krause Avatar answered Sep 20 '22 15:09

Kris Krause


Write modular code. It's not very hard.

Personally I recommend you write very many modules and user a building process and package manager to append them into one.

I use browserify for that.

// DOM-utils.js

module.exports = {
  // util methods
}

// some-UI-Widget.js
var utils = require("DOM-utils"),
  jQuery = require("jQuery");

// do ui logic

module.exports = someWidget

I would go further and recommend you use a mediator pattern (see mediator) to keep all your code loosely coupled.

See this example application

like image 39
Raynos Avatar answered Sep 20 '22 15:09

Raynos