Web view

HTML

Basic HTML (more precisely JSP) should not be a serious problem. Read examples and learn all basic tab and their basic behaviour.

CSS

CSS is for formatting HTML. I have to say there is no easy way of learn and master CSS.

The best strategy can be start the development some good looking CSS template like Bootstrap and then add your own extension if needed.

As you are tweaking existing CSS and check the result in Firebug or in chrome development tools you can learn what is the effect of specific changes.

I have found Stackoverflow and w3schools really usefull to find information. But in general, if you can describe your problem and put into Google you will find the solution withing one or two pages.

JavaScript

JavaScript is not evil. JavaScript is not a bad programming language. It is just different. It has it own semantics which make sense to learn as developing.

Rule of thumb: if you are applying the same software development technics as for Java you will got the same level of clear and easy to maintain code as it would be developed in Java.

Patterns For Large-Scale JavaScript Application Architecture is an extramely good artile with lots of usefull references what kind of patterns and practices should be applied to JavaScript based development.

Decouple app. architecture w/module,facade & mediator patterns. Mods publish msgs, mediator acts as pub/sub mgr & facade handles security

JQuery

JS is perfect, it’s just DOM API in browsers that sucks!

JQuery is framwork which helps to manipulate webpages and develop browser independent JavaScript applications. Quete complex ui manipulation can be surprisingly easy with JQuery.

It has lots of plugins to extend base functionality.

JQuery UI

JQuery UI framework over JQuery. It provides a consistent, simple and easy to use widget library.

It has lots of plugins to extend base functionality.

Real MVC

The key to develop easy to maintain web application is to apply the same design patterns as in fat client. The key pattern is the MVC, but not the MVC applied in web application but the real, old, traditional, Smalltalk originated MVC.

In article MVC Architecture for JavaScript Applications you could learn how it is working and what how to implement in JavaScript.

After reading and understanding MVC you could optimize it.

The Controller part of MVC is responsible for decising which entity (or entities) should handle the UI event.

The controller is a decision maker. When a user clicks in the view, the view forwards that event on to the controller so the controller can decide what needs doing.

In several cases one UI event is handled by one entity or multiple independent entities. In this case the whole controller can be simplified by introducing Message Bus

MessageBus

Message bus theory:

• Event Collaboration
• Message Bus
• Client-side Messaging Essentials
• Message Bus vs “Pub Sub”
• Deprecating the Observer Pattern
• Why should the observer pattern be deprecated?
• Event Notifier, a Pattern for Event Notification

In PLI we are using AmplifyJS as message bus implementation.

Publish an event example:

        pli_event_bus.publish("clipboard/changed", instance);

Subscribe example:

        pli_event_bus.subscribe("clipboard/changed", on_clipboard_changed);
                ...
                
        function on_clipboard_changed(clipboard) {
                ....
        }

• Physical software project structure
• Service layer
• Data access layer
• Spring MVC
• Web view
• Toolbox
• Testing
• Jawr, webjars, bootstrap, Spring setup trick
• Jakarta Equivalence Relation
• Difficult to test example refactoring