Web Atoms is an Enterprise Grade JavaScript Framework with UI Data Binding and Templates along with more than 20 ready to use Line of Business Controls.

1. Web Atoms
More Markup Less Code

2. HTML as Universal UI Language
• Each device has different UI Elements and Different
way of Interaction Mobile
• Each device has different scale and screen
measurement
• Each device needs different programming language
expertise
• Each device has its own set of APIs Camera
TV
HTML PC
• Emerge of Unified HTML Device Programming like
PhoneGap
• UI is complex to write, and is even more complex to
rewrite for different platforms
• Web is truly a unified version of User Interface Tablets

3. Development Nightmares with JavaScript
• Easy to write
• Difficult to maintain
• Difficult to Refractor
• Difficult to understand our own code
• Can not blame anyone for my own code
• Difficult to visualize UI Hierarchy
• How does my UI Looks?
• And this is what code looks at the end 

4. Markup MXML, XAML, XUL
• Markups are easy to write and visualize
• Easy to divide
• Easy to reuse
• Flex, Silverlight and XUL
• Can create Custom Elements
• Extend existing Elements
• Collapse/Expand nodes to visualize
• Easy to refractor

5. HTML Problems
• Unable to create Custom Elements (Components/Controls)
• Unable to extend elements
• HTML and JavaScript are independent
• Conflicting IDs of Elements
• Scripts and Elements are loosely coupled
• Cross Browser Problems (Fixed with jQuery)
• Too much of jQuery leads to Complex Code

6. Web Atoms – Brings Best of Flex/Silverlight
Silverlight Flex
• DockPanel • Controls
• Templates • Bindings
Web
Atoms

7. More Markup Less Code
• Many ready to use Controls
• Simple Binding Expressions
• One Time Binding
• One Way Binding
• Two Way Binding
• Style Binding
• CSS Customization
• Control Templates
• Scope Isolation

8. Simple Installation/Start
• Add following in HTML
• jQuery (1.7 Onwards)
• WebAtoms.js
• WebAtoms.css
• Customized Web Atoms Classes CSS (Optional)
• AppConfig.js (Optional-Just a Config that changes default WebAtoms
Behaviour such as common AJAX headers, Image path)
• Define one Div as AtomApplication
• Every child element is now part of Web Atoms Framework

9. Easy to Debug
• Every Web Atoms Control is assigned an unique HTML ID
• .atomControl property exposes control associated with element
• waXXX.atomControl.get_propertyName() returns value in console
• .atomControl.bindings hold AtomBinding, which
• Contain reference of element to change
• Contain key (path of property) of element to change
• Contain property path of source
• Contain last set value for debugging

10. Atom.set, Atom.get (Only in JS Code)
• JavaScript objects did not allow property accessors/mutators
• Some does now, but IE does not, till 10.0, we still have many to support
• AtomControls define property as get_/set_ set of methods
• Value property is defined as get_value and set_value functions
• JSON retrieved from AJAX contains direct named members
• Atom.set, Atom.get methods first check if get_/set_ methods
exist on target, otherwise access member with same name
• Atom.set also updates the UI
• Binding expressions take care of Atom.set/Atom.get Automatically

11. Templates
• You can customize templates by designating one element as atom-
template
• Control expects templates to represent data
• Learning Silverlight will help you in understanding how templates
interact
• Templates can change look and feel of existing controls
completely

12. Line of Business Controls
• AtomItemsControl • AtomWindow
• Hosts list of data objects • Modal Window to host
• Displays data with itemTemplate content/iframe
• Allows filtering/sorting • AtomWizard
• AtomNavigatorList • Ready to use Control to implement
multi step process
• Simplified Master-Detail View
• iPhone/iPad type of Detail/Back
Navigation
• Supports Data Paging

13. More…
• Web Atoms Website
• http://webatoms.neurospeech.com
• Web Atoms Documentation
• http://neurospeech.com/webatoms/docs
• FaceBook Page
• http://facebook.com/webatoms
• Twitter Page
• http://twitter.com/akashkava