@maccesar/titools 2.2.3 → 2.2.8

package/skills/ti-guides/references/application-frameworks.md

@@ -1,30 +1,22 @@
-# Application Frameworks
+# Application frameworks
 
-Framework options and architectural patterns for Titanium applications.
+Framework options and architecture patterns for Titanium applications.
 
-1. [Alloy Framework](#alloy-framework)
-2. [Classic Titanium](#classic-titanium)
-3. [Choosing a Framework](#choosing-a-framework)
-4. [Architecture Patterns](#architecture-patterns)
+## Alloy framework
 
----
-
-## Alloy Framework
+Alloy is the official MVC framework for Titanium. It was developed by Appcelerator and is now maintained by TiDev.
 
-**Alloy** is the official MVC framework for Titanium, originally developed by Appcelerator and now maintained by TiDev.
+### What Alloy provides
 
-### What is Alloy?
+- MVC structure with models, views, and controllers
+- Built-in libraries (Backbone.js, Underscore.js)
+- XML views for declarative UI
+- TSS for CSS-like styling
+- Data binding between views and models
+- Widgets for reusable UI components
+- Model and collection sync with REST and SQL adapters
 
-Alloy provides:
-- **MVC Architecture** - Separate models, views, and controllers
-- **Built-in Libraries** - Backbone.js, Underscore.js
-- **XML Views** - Declarative UI markup
-- **TSS Styling** - CSS-like styling system
-- **Data Binding** - Automatic view-to-model synchronization
-- **Widgets** - Reusable UI components
-- **Model/Collection Sync** - Built-in REST and SQL adapters
-
-### Project Structure
+### Project structure
 
 ```
 app/
@@ -39,9 +31,9 @@ app/
 └── alloy.js         # Entry point
 ```
 
-### Sample Alloy Code
+### Sample Alloy code
 
-**View (XML):**
+View (XML):
 ```xml
 <Alloy>
     <Window class="container">
@@ -50,7 +42,7 @@ app/
 </Alloy>
 ```
 
-**Style (TSS):**
+Style (TSS):
 ```css
 ".container": {
     backgroundColor: "#fff"
@@ -62,7 +54,7 @@ app/
 }
 ```
 
-**Controller (JS):**
+Controller (JS):
 ```javascript
 const doClick = (e) => {
     alert('Clicked!');
@@ -71,42 +63,42 @@ const doClick = (e) => {
 $.index.open();
 ```
 
-### Alloy Resources
+### Alloy resources
 
-- **Alloy Guides:** See the `alloy-guides` skill
-- **Alloy CLI:** See `alloy-cli-advanced.md`
-- **Alloy Data:** See `alloy-data-mastery.md`
-- **Alloy Widgets:** See `alloy-widgets-and-themes.md`
+- Alloy guides: see the `alloy-guides` skill
+- Alloy CLI: see `alloy-cli-advanced.md`
+- Alloy data: see `alloy-data-mastery.md`
+- Alloy widgets: see `alloy-widgets-and-themes.md`
 
-### Angular Integration
+### Angular integration
 
-Angular integration with Titanium SDK was under development but is no longer actively maintained.
+Angular integration with Titanium SDK was under development but is no longer maintained.
 
-### React Community Framework
+### React community framework
 
-A community-based React integration exists at https://github.com/nicolomonili/react-titanium (experimental).
+A community React integration exists at https://github.com/nicolomonili/react-titanium (experimental).
 
-### When to Use Alloy
+### When to use Alloy
 
-✅ **Use Alloy for:**
+Use Alloy for:
 - New projects (default choice)
-- Teams wanting MVC structure
-- Projects needing data binding
+- Teams that want MVC structure
+- Projects that need data binding
 - Rapid development with XML views
 - Reusable components (widgets)
 
-❌ **Consider alternatives for:**
-- Very simple apps (overkill)
-- Teams preferring pure JavaScript
+Consider alternatives for:
+- Very simple apps
+- Teams that prefer pure JavaScript
 - Projects with unique architectural needs
 
 ---
 
 ## Classic Titanium
 
-Classic Titanium refers to building apps without Alloy, using pure JavaScript and CommonJS modules.
+Classic Titanium means building apps without Alloy, using JavaScript and CommonJS modules.
 
-### Project Structure
+### Project structure
 
 ```
 Resources/
@@ -119,9 +111,9 @@ Resources/
 └── assets/          # Images, etc.
 ```
 
-### Sample Classic Code
+### Sample Classic code
 
-**app.js:**
+app.js:
 ```javascript
 // Single namespace pattern
 const app = {};
@@ -134,7 +126,7 @@ app.mainWindow = app.ui.createApplicationWindow();
 app.mainWindow.open();
 ```
 
-**ui/ApplicationWindow.js:**
+ui/ApplicationWindow.js:
 ```javascript
 // Extend namespace
 app.ui = app.ui || {};
@@ -155,9 +147,9 @@ app.ui.createApplicationWindow = () => {
 };
 ```
 
-### CommonJS Pattern (Recommended)
+### CommonJS pattern (recommended)
 
-**myModule.js:**
+myModule.js:
 ```javascript
 // Private variables
 const privateData = 'secret';
@@ -174,65 +166,55 @@ exports.getData = () => {
 };
 ```
 
-**app.js:**
+app.js:
 ```javascript
 const myModule = require('myModule');
 const win = myModule.createWindow();
 win.open();
 ```
 
-### When to Use Classic
+### When to use Classic
 
-✅ **Use Classic for:**
+Use Classic for:
 - Simple projects
 - Developers who prefer pure JavaScript
 - Migrating from older Titanium projects
 - Fine-grained control over UI creation
 - Learning the Titanium API directly
 
-❌ **Consider Alloy for:**
+Consider Alloy for:
 - Large teams
 - Complex apps with many screens
-- Projects needing built-in MVC
+- Projects that need built-in MVC
 - Data-heavy applications
 
 ---
 
-## Choosing a Framework
+## Choosing a framework
 
 ### Comparison
 
-| Feature            | Alloy                   | Classic            |
-| ------------------ | ----------------------- | ------------------ |
-| **Learning Curve** | Steeper (XML, TSS, MVC) | Easier (just JS)   |
-| **Boilerplate**    | Less (declarative)      | More (imperative)  |
-| **Structure**      | Enforced (MVC)          | Manual             |
-| **Data Binding**   | Built-in                | Manual             |
-| **Styling**        | TSS (CSS-like)          | Inline JS          |
-| **Team Size**      | Better for large teams  | Flexible           |
-| **Rapid Dev**      | Faster (once learned)   | Slower (more code) |
+| Feature           | Alloy                   | Classic            |
+| ----------------- | ----------------------- | ------------------ |
+| Learning curve    | Steeper (XML, TSS, MVC) | Easier (just JS)   |
+| Boilerplate       | Less (declarative)      | More (imperative)  |
+| Structure         | Enforced (MVC)          | Manual             |
+| Data binding      | Built-in                | Manual             |
+| Styling           | TSS (CSS-like)          | Inline JS          |
+| Team size         | Better for large teams  | Flexible           |
+| Rapid development | Faster once learned     | Slower (more code) |
 
 ### Recommendation
 
-**Start with Alloy** - It's the default for new projects and provides:
-- Built-in best practices
-- MVC structure from day one
-- Less code to write
-- Better team collaboration
-- Official support and updates
-
-**Switch to Classic** if:
-- Alloy feels too complex for your needs
-- You prefer pure JavaScript
-- Your app is very simple
+Start with Alloy if you are building a new app or expect multiple contributors. If Alloy feels like overhead or the app is very small, Classic is fine.
 
 ---
 
-## Architecture Patterns
+## Architecture patterns
 
-### Namespaced Pattern
+### Namespaced pattern
 
-Classic Titanium pattern with single global namespace:
+Classic Titanium pattern with a single global namespace:
 
 ```javascript
 const app = {
@@ -253,11 +235,11 @@ app.init();
 app.run();
 ```
 
-### CommonJS Modules
+### CommonJS modules
 
 Modern JavaScript pattern for Titanium:
 
-**models/user.js:**
+models/user.js:
 ```javascript
 exports.create = (attrs) => {
     return {
@@ -270,7 +252,7 @@ exports.create = (attrs) => {
 };
 ```
 
-**controllers/user.js:**
+controllers/user.js:
 ```javascript
 const User = require('models/user');
 
@@ -281,7 +263,7 @@ exports.register = (data) => {
 };
 ```
 
-### MVC with Alloy (Built-in)
+### MVC with Alloy (built-in)
 
 Alloy enforces MVC:
 
@@ -292,11 +274,11 @@ app/
 └── views/userView.xml             # Presentation
 ```
 
-### Repository Pattern
+### Repository pattern
 
 Separate data access from business logic:
 
-**repositories/userRepository.js:**
+repositories/userRepository.js:
 ```javascript
 exports.findById = (id) => {
     // Database call
@@ -309,7 +291,7 @@ exports.save = (user) => {
 };
 ```
 
-**services/userService.js:**
+services/userService.js:
 ```javascript
 const repo = require('repositories/userRepository');
 
@@ -324,7 +306,7 @@ exports.register = (data) => {
 
 ---
 
-## Framework Interoperability
+## Framework interoperability
 
 ### Mix Alloy and Classic
 
@@ -339,46 +321,46 @@ $.label.text = data;
 
 ### Migrate Classic to Alloy
 
-1. Create new Alloy project
-2. Move business logic to `controllers/` or `lib/`
-3. Convert UI creation to `views/` (XML)
-4. Create `styles/` (TSS) from inline styles
-5. Update data access to use `models/`
+1. Create a new Alloy project.
+2. Move business logic to `controllers/` or `lib/`.
+3. Convert UI creation to `views/` (XML).
+4. Create `styles/` (TSS) from inline styles.
+5. Update data access to use `models/`.
 
 ---
 
-## Best Practices
+## Best practices
 
-### For Alloy Projects
+### For Alloy projects
 
-1. **Follow MVC strictly** - Keep models/models, views/views, controllers/logic
-2. **Use data binding** - Avoid manual view updates
-3. **Leverage widgets** - Reusable components
-4. **Use themes** - For styling variations
-5. **Keep controllers lean** - Move business logic to lib/
+1. Follow MVC strictly. Keep models in `models/`, views in `views/`, and controller logic in `controllers/`.
+2. Use data binding and avoid manual view updates.
+3. Use widgets for reusable UI.
+4. Use themes for styling variants.
+5. Keep controllers lean and move business logic to `lib/`.
 
-### For Classic Projects
+### For Classic projects
 
-1. **Use CommonJS modules** - Not `Ti.include()`
-2. **Single namespace** - One global variable maximum
-3. **Protect global scope** - Use IIFEs
-4. **Separate concerns** - Models, views, controllers folders
-5. **Document patterns** - Make architecture clear to team
+1. Use CommonJS modules instead of `Ti.include()`.
+2. Keep a single global namespace.
+3. Protect global scope with IIFEs.
+4. Separate concerns with `models/`, `views/`, and `controllers/` folders.
+5. Document patterns so the team shares the same structure.
 
-### For Both
+### For both
 
-1. **Memory management** - Clean up listeners, null objects
-2. **Error handling** - Try/catch around critical code
-3. **Logging** - Use Ti.API for debugging
-4. **Code style** - Follow `style-and-conventions.md`
-5. **Testing** - Write unit tests for business logic
+1. Clean up listeners and null heavy objects.
+2. Add try/catch around critical code paths.
+3. Use `Ti.API` for logging.
+4. Follow `style-and-conventions.md` for code style.
+5. Write unit tests for business logic.
 
 ---
 
 ## Resources
 
-- **Alloy Guides:** See the `alloy-guides` skill
-- **CommonJS Advanced:** See `commonjs-advanced.md`
-- **Coding Best Practices:** See `coding-best-practices.md`
-- **JavaScript Primer:** See `javascript-primer.md`
-- **Alloy CLI:** See `alloy-cli-advanced.md`
+- Alloy guides: see the `alloy-guides` skill
+- CommonJS advanced: see `commonjs-advanced.md`
+- Coding best practices: see `coding-best-practices.md`
+- JavaScript primer: see `javascript-primer.md`
+- Alloy CLI: see `alloy-cli-advanced.md`