@maccesar/titools 2.2.4 → 2.2.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -23
- package/lib/commands/update.js +4 -12
- package/package.json +1 -1
- package/skills/alloy-guides/SKILL.md +31 -31
- package/skills/alloy-guides/references/CONCEPTS.md +3 -3
- package/skills/alloy-guides/references/CONTROLLERS.md +1 -1
- package/skills/alloy-guides/references/MODELS.md +6 -6
- package/skills/alloy-guides/references/VIEWS_WITHOUT_CONTROLLERS.md +1 -1
- package/skills/alloy-guides/references/VIEWS_XML.md +1 -1
- package/skills/alloy-guides/references/WIDGETS.md +1 -1
- package/skills/alloy-howtos/SKILL.md +27 -27
- package/skills/alloy-howtos/references/best_practices.md +9 -9
- package/skills/alloy-howtos/references/cli_reference.md +14 -14
- package/skills/alloy-howtos/references/config_files.md +16 -16
- package/skills/alloy-howtos/references/custom_tags.md +16 -16
- package/skills/alloy-howtos/references/debugging_troubleshooting.md +11 -15
- package/skills/alloy-howtos/references/samples.md +19 -19
- package/skills/purgetss/SKILL.md +11 -1
- package/skills/purgetss/references/animation-system.md +1 -1
- package/skills/purgetss/references/cli-commands.md +3 -3
- package/skills/purgetss/references/customization-deep-dive.md +1 -1
- package/skills/purgetss/references/dynamic-component-creation.md +1 -1
- package/skills/purgetss/references/icon-fonts.md +4 -0
- package/skills/purgetss/references/installation-setup.md +8 -1
- package/skills/purgetss/references/migration-guide.md +4 -0
- package/skills/purgetss/references/tikit-components.md +193 -204
- package/skills/purgetss/references/ui-ux-design.md +1 -1
- package/skills/ti-expert/SKILL.md +78 -118
- package/skills/ti-expert/references/alloy-builtins.md +18 -18
- package/skills/ti-expert/references/alloy-structure.md +21 -21
- package/skills/ti-expert/references/anti-patterns.md +15 -15
- package/skills/ti-expert/references/cli-expert.md +15 -15
- package/skills/ti-expert/references/code-conventions.md +38 -38
- package/skills/ti-expert/references/contracts.md +8 -8
- package/skills/ti-expert/references/controller-patterns.md +14 -14
- package/skills/ti-expert/references/error-handling.md +11 -11
- package/skills/ti-expert/references/examples.md +12 -12
- package/skills/ti-expert/references/migration-patterns.md +24 -24
- package/skills/ti-expert/references/patterns.md +10 -10
- package/skills/ti-expert/references/performance-listview.md +16 -16
- package/skills/ti-expert/references/performance-optimization.md +41 -41
- package/skills/ti-expert/references/security-device.md +22 -22
- package/skills/ti-expert/references/security-fundamentals.md +19 -19
- package/skills/ti-expert/references/state-management.md +33 -33
- package/skills/ti-expert/references/testing-e2e-ci.md +25 -25
- package/skills/ti-expert/references/testing-unit.md +24 -24
- package/skills/ti-expert/references/theming.md +15 -15
- package/skills/ti-guides/SKILL.md +58 -60
- package/skills/ti-guides/references/advanced-data-and-images.md +33 -33
- package/skills/ti-guides/references/android-manifest.md +15 -15
- package/skills/ti-guides/references/app-distribution.md +70 -166
- package/skills/ti-guides/references/application-frameworks.md +96 -114
- package/skills/ti-guides/references/cli-reference.md +294 -294
- package/skills/ti-guides/references/coding-best-practices.md +42 -33
- package/skills/ti-guides/references/commonjs-advanced.md +57 -51
- package/skills/ti-guides/references/hello-world.md +36 -36
- package/skills/ti-guides/references/hyperloop-native-access.md +66 -66
- package/skills/ti-guides/references/javascript-primer.md +83 -101
- package/skills/ti-guides/references/reserved-words.md +9 -9
- package/skills/ti-guides/references/resources.md +75 -83
- package/skills/ti-guides/references/style-and-conventions.md +35 -28
- package/skills/ti-guides/references/tiapp-config.md +110 -74
- package/skills/ti-howtos/SKILL.md +88 -92
- package/skills/ti-howtos/references/android-platform-deep-dives.md +104 -104
- package/skills/ti-howtos/references/automation-fastlane-appium.md +39 -39
- package/skills/ti-howtos/references/buffer-codec-streams.md +60 -60
- package/skills/ti-howtos/references/cross-platform-development.md +115 -136
- package/skills/ti-howtos/references/debugging-profiling.md +167 -181
- package/skills/ti-howtos/references/extending-titanium.md +121 -121
- package/skills/ti-howtos/references/google-maps-v2.md +84 -82
- package/skills/ti-howtos/references/ios-map-kit.md +65 -60
- package/skills/ti-howtos/references/ios-platform-deep-dives.md +123 -123
- package/skills/ti-howtos/references/local-data-sources.md +79 -78
- package/skills/ti-howtos/references/location-and-maps.md +116 -120
- package/skills/ti-howtos/references/media-apis.md +87 -86
- package/skills/ti-howtos/references/notification-services.md +250 -260
- package/skills/ti-howtos/references/remote-data-sources.md +98 -93
- package/skills/ti-howtos/references/tutorials.md +226 -216
- package/skills/ti-howtos/references/using-modules.md +73 -102
- package/skills/ti-howtos/references/web-content-integration.md +101 -103
- package/skills/ti-howtos/references/webpack-build-pipeline.md +52 -44
- package/skills/ti-ui/SKILL.md +85 -85
- package/skills/ti-ui/references/accessibility-deep-dive.md +57 -57
- package/skills/ti-ui/references/animation-and-matrices.md +79 -79
- package/skills/ti-ui/references/application-structures.md +96 -99
- package/skills/ti-ui/references/custom-fonts-styling.md +99 -99
- package/skills/ti-ui/references/event-handling.md +58 -58
- package/skills/ti-ui/references/gestures.md +62 -64
- package/skills/ti-ui/references/icons-and-splash-screens.md +88 -88
- package/skills/ti-ui/references/layouts-and-positioning.md +87 -97
- package/skills/ti-ui/references/listviews-and-performance.md +107 -107
- package/skills/ti-ui/references/orientation.md +87 -88
- package/skills/ti-ui/references/platform-ui-android.md +87 -81
- package/skills/ti-ui/references/platform-ui-ios.md +63 -61
- package/skills/ti-ui/references/scrolling-views.md +29 -29
- package/skills/ti-ui/references/tableviews.md +56 -56
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
# Error
|
|
1
|
+
# Error handling & logging guide
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## Apperror classes
|
|
4
4
|
|
|
5
5
|
```javascript
|
|
6
6
|
// lib/core/appError.js
|
|
@@ -49,7 +49,7 @@ exports.ErrorCodes = {
|
|
|
49
49
|
}
|
|
50
50
|
```
|
|
51
51
|
|
|
52
|
-
## Logger
|
|
52
|
+
## Logger service
|
|
53
53
|
|
|
54
54
|
```javascript
|
|
55
55
|
// lib/services/logger.js
|
|
@@ -142,7 +142,7 @@ class Logger {
|
|
|
142
142
|
module.exports = new Logger()
|
|
143
143
|
```
|
|
144
144
|
|
|
145
|
-
## Error
|
|
145
|
+
## Error handler service
|
|
146
146
|
|
|
147
147
|
```javascript
|
|
148
148
|
// lib/services/errorHandler.js
|
|
@@ -197,7 +197,7 @@ function _getUserMessage(error) {
|
|
|
197
197
|
}
|
|
198
198
|
```
|
|
199
199
|
|
|
200
|
-
## Using the
|
|
200
|
+
## Using the logger
|
|
201
201
|
|
|
202
202
|
```javascript
|
|
203
203
|
// lib/services/userService.js
|
|
@@ -233,7 +233,7 @@ exports.getUserProfile = async function getUserProfile(userId) {
|
|
|
233
233
|
}
|
|
234
234
|
```
|
|
235
235
|
|
|
236
|
-
## API
|
|
236
|
+
## API client error handling
|
|
237
237
|
|
|
238
238
|
```javascript
|
|
239
239
|
// lib/api/client.js
|
|
@@ -302,7 +302,7 @@ exports.get = async function get(endpoint, params = {}) {
|
|
|
302
302
|
}
|
|
303
303
|
```
|
|
304
304
|
|
|
305
|
-
## Controller
|
|
305
|
+
## Controller error handling pattern
|
|
306
306
|
|
|
307
307
|
```javascript
|
|
308
308
|
// controllers/user/detail.js
|
|
@@ -376,7 +376,7 @@ function cleanup() {
|
|
|
376
376
|
$.cleanup = cleanup
|
|
377
377
|
```
|
|
378
378
|
|
|
379
|
-
## Global
|
|
379
|
+
## Global error handler
|
|
380
380
|
|
|
381
381
|
```javascript
|
|
382
382
|
// alloy.js - Setup global error catching
|
|
@@ -396,7 +396,7 @@ if (Ti.App.deployType === 'production') {
|
|
|
396
396
|
}
|
|
397
397
|
```
|
|
398
398
|
|
|
399
|
-
## Crash
|
|
399
|
+
## Crash reporting integration
|
|
400
400
|
|
|
401
401
|
```javascript
|
|
402
402
|
// lib/services/crashReporting.js
|
|
@@ -425,7 +425,7 @@ exports.reportToCrashService = function reportToCrashService(error, context = {}
|
|
|
425
425
|
}
|
|
426
426
|
```
|
|
427
427
|
|
|
428
|
-
## Validation
|
|
428
|
+
## Validation helper
|
|
429
429
|
|
|
430
430
|
```javascript
|
|
431
431
|
// lib/helpers/validator.js
|
|
@@ -465,7 +465,7 @@ exports.validateRequired = function validateRequired(value, fieldName) {
|
|
|
465
465
|
}
|
|
466
466
|
```
|
|
467
467
|
|
|
468
|
-
## Logging
|
|
468
|
+
## Logging best practices
|
|
469
469
|
|
|
470
470
|
| Practice | Example |
|
|
471
471
|
| -------------------------- | ------------------------------------------------------ |
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
# Alloy
|
|
1
|
+
# Alloy implementation examples
|
|
2
2
|
|
|
3
|
-
## API
|
|
3
|
+
## API client service
|
|
4
4
|
Standard logic for network requests.
|
|
5
5
|
|
|
6
6
|
```javascript
|
|
@@ -18,7 +18,7 @@ exports.get = function(endpoint, params = {}) {
|
|
|
18
18
|
}
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
## Native
|
|
21
|
+
## Native module wrapper service
|
|
22
22
|
Encapsulate native modules (e.g., audio, maps, facebook) to decouple from controllers.
|
|
23
23
|
|
|
24
24
|
```javascript
|
|
@@ -33,7 +33,7 @@ exports.performAction = function(data) {
|
|
|
33
33
|
}
|
|
34
34
|
```
|
|
35
35
|
|
|
36
|
-
## i18n
|
|
36
|
+
## i18n helper
|
|
37
37
|
Logic for complex string transformations and plurals.
|
|
38
38
|
|
|
39
39
|
```javascript
|
|
@@ -44,7 +44,7 @@ exports.getPluralMessages = function(count) {
|
|
|
44
44
|
}
|
|
45
45
|
```
|
|
46
46
|
|
|
47
|
-
## Model with SQL
|
|
47
|
+
## Model with SQL adapter
|
|
48
48
|
Definition for local SQLite persistence.
|
|
49
49
|
|
|
50
50
|
```javascript
|
|
@@ -64,7 +64,7 @@ exports.definition = {
|
|
|
64
64
|
}
|
|
65
65
|
```
|
|
66
66
|
|
|
67
|
-
## Fully
|
|
67
|
+
## Fully styled & accessible view
|
|
68
68
|
Applying TSS styles while maintaining accessibility.
|
|
69
69
|
|
|
70
70
|
```xml
|
|
@@ -111,7 +111,7 @@ Applying TSS styles while maintaining accessibility.
|
|
|
111
111
|
- Use margins on children for spacing (NOT padding on parent)
|
|
112
112
|
- Use `Ti.UI.FILL` for full-width elements
|
|
113
113
|
|
|
114
|
-
## Cleanup
|
|
114
|
+
## Cleanup pattern in controller
|
|
115
115
|
Critical for memory management and avoiding leaks.
|
|
116
116
|
|
|
117
117
|
```javascript
|
|
@@ -133,7 +133,7 @@ function cleanup() {
|
|
|
133
133
|
$.cleanup = cleanup
|
|
134
134
|
```
|
|
135
135
|
|
|
136
|
-
## Animation
|
|
136
|
+
## Animation usage
|
|
137
137
|
Using `Ti.UI.createAnimation()` for UI transformations.
|
|
138
138
|
|
|
139
139
|
```javascript
|
|
@@ -153,7 +153,7 @@ function shakeError(element) {
|
|
|
153
153
|
}
|
|
154
154
|
```
|
|
155
155
|
|
|
156
|
-
## Complete
|
|
156
|
+
## Complete crud example
|
|
157
157
|
|
|
158
158
|
```javascript
|
|
159
159
|
// lib/services/productService.js
|
|
@@ -301,7 +301,7 @@ function cleanup() {
|
|
|
301
301
|
$.cleanup = cleanup
|
|
302
302
|
```
|
|
303
303
|
|
|
304
|
-
## ListView with
|
|
304
|
+
## ListView with search and filter
|
|
305
305
|
|
|
306
306
|
```xml
|
|
307
307
|
<!-- views/contacts/list.xml -->
|
|
@@ -455,7 +455,7 @@ function cleanup() {
|
|
|
455
455
|
$.cleanup = cleanup
|
|
456
456
|
```
|
|
457
457
|
|
|
458
|
-
## Form with
|
|
458
|
+
## Form with validation example
|
|
459
459
|
|
|
460
460
|
```xml
|
|
461
461
|
<!-- views/auth/register.xml -->
|
|
@@ -696,7 +696,7 @@ function cleanup() {
|
|
|
696
696
|
$.cleanup = cleanup
|
|
697
697
|
```
|
|
698
698
|
|
|
699
|
-
## Tab-
|
|
699
|
+
## Tab-based navigation example
|
|
700
700
|
|
|
701
701
|
```xml
|
|
702
702
|
<!-- views/main.xml -->
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
# Migration
|
|
1
|
+
# Migration patterns for legacy Titanium apps
|
|
2
2
|
|
|
3
|
-
## Assessment
|
|
3
|
+
## Assessment checklist
|
|
4
4
|
|
|
5
5
|
Before migrating, evaluate the current codebase:
|
|
6
6
|
|
|
@@ -12,11 +12,11 @@ Before migrating, evaluate the current codebase:
|
|
|
12
12
|
| Navigation | Direct `Alloy.createController().getView().open()` | Navigation service |
|
|
13
13
|
| Data | Scattered `Ti.App.Properties`, no collections | Centralized state + Collections |
|
|
14
14
|
|
|
15
|
-
## Phase 1: TSS
|
|
15
|
+
## Phase 1: TSS organization
|
|
16
16
|
|
|
17
17
|
**Goal**: Migrate from inline styling and scattered styles to well-organized TSS files.
|
|
18
18
|
|
|
19
|
-
### Step 1:
|
|
19
|
+
### Step 1: audit existing styles
|
|
20
20
|
|
|
21
21
|
Find all inline attributes and consolidate into TSS files:
|
|
22
22
|
```bash
|
|
@@ -26,7 +26,7 @@ grep -r 'font=' app/views/
|
|
|
26
26
|
grep -r 'color=' app/views/
|
|
27
27
|
```
|
|
28
28
|
|
|
29
|
-
### Step 2:
|
|
29
|
+
### Step 2: move inline attributes to TSS
|
|
30
30
|
|
|
31
31
|
```xml
|
|
32
32
|
<!-- BEFORE: Inline attributes -->
|
|
@@ -48,7 +48,7 @@ grep -r 'color=' app/views/
|
|
|
48
48
|
"#title": { color: "#333", font: { fontSize: 18, fontWeight: "bold" } }
|
|
49
49
|
```
|
|
50
50
|
|
|
51
|
-
### Step 3:
|
|
51
|
+
### Step 3: organize TSS structure
|
|
52
52
|
|
|
53
53
|
1. Use `app.tss` for global styles (shared across all views)
|
|
54
54
|
2. Use per-controller TSS files for view-specific styles
|
|
@@ -59,11 +59,11 @@ grep -r 'color=' app/views/
|
|
|
59
59
|
".btn-primary": { backgroundColor: '#2563eb', color: '#fff', height: 44, borderRadius: 8 }
|
|
60
60
|
```
|
|
61
61
|
|
|
62
|
-
## Phase 2:
|
|
62
|
+
## Phase 2: service layer extraction
|
|
63
63
|
|
|
64
64
|
**Goal**: Move business logic from controllers to services.
|
|
65
65
|
|
|
66
|
-
### Identify
|
|
66
|
+
### Identify fat controllers
|
|
67
67
|
|
|
68
68
|
Signs of a fat controller:
|
|
69
69
|
- API calls with `Ti.Network.createHTTPClient`
|
|
@@ -71,7 +71,7 @@ Signs of a fat controller:
|
|
|
71
71
|
- Native module interactions
|
|
72
72
|
- 100+ lines of code
|
|
73
73
|
|
|
74
|
-
### Extract to
|
|
74
|
+
### Extract to services
|
|
75
75
|
|
|
76
76
|
```javascript
|
|
77
77
|
// BEFORE: Fat controller
|
|
@@ -117,18 +117,18 @@ async function loadProfile() {
|
|
|
117
117
|
}
|
|
118
118
|
```
|
|
119
119
|
|
|
120
|
-
## Phase 3:
|
|
120
|
+
## Phase 3: event system migration
|
|
121
121
|
|
|
122
122
|
**Goal**: Replace `Ti.App.fireEvent` with Backbone.Events.
|
|
123
123
|
|
|
124
|
-
### Step 1:
|
|
124
|
+
### Step 1: create event bus
|
|
125
125
|
|
|
126
126
|
```javascript
|
|
127
127
|
// alloy.js
|
|
128
128
|
Alloy.Events = _.clone(Backbone.Events)
|
|
129
129
|
```
|
|
130
130
|
|
|
131
|
-
### Step 2:
|
|
131
|
+
### Step 2: find all Ti.App event usage
|
|
132
132
|
|
|
133
133
|
```bash
|
|
134
134
|
# Find all Ti.App.fireEvent calls
|
|
@@ -136,7 +136,7 @@ grep -r "Ti.App.fireEvent" app/controllers/
|
|
|
136
136
|
grep -r "Ti.App.addEventListener" app/controllers/
|
|
137
137
|
```
|
|
138
138
|
|
|
139
|
-
### Step 3:
|
|
139
|
+
### Step 3: migrate events
|
|
140
140
|
|
|
141
141
|
```javascript
|
|
142
142
|
// BEFORE: Ti.App events (memory leaks, no cleanup)
|
|
@@ -151,7 +151,7 @@ Alloy.Events.on('user:updated', onUserUpdated)
|
|
|
151
151
|
Alloy.Events.off('user:updated', onUserUpdated)
|
|
152
152
|
```
|
|
153
153
|
|
|
154
|
-
### Step 4:
|
|
154
|
+
### Step 4: add cleanup functions
|
|
155
155
|
|
|
156
156
|
Every controller that listens to events needs cleanup:
|
|
157
157
|
|
|
@@ -171,11 +171,11 @@ function cleanup() {
|
|
|
171
171
|
$.cleanup = cleanup
|
|
172
172
|
```
|
|
173
173
|
|
|
174
|
-
## Phase 4:
|
|
174
|
+
## Phase 4: navigation service
|
|
175
175
|
|
|
176
176
|
**Goal**: Centralize navigation with automatic cleanup.
|
|
177
177
|
|
|
178
|
-
### Step 1:
|
|
178
|
+
### Step 1: create navigation service
|
|
179
179
|
|
|
180
180
|
```javascript
|
|
181
181
|
// lib/services/navigation.js
|
|
@@ -216,7 +216,7 @@ exports.getStack = function() {
|
|
|
216
216
|
}
|
|
217
217
|
```
|
|
218
218
|
|
|
219
|
-
### Step 2:
|
|
219
|
+
### Step 2: replace direct navigation
|
|
220
220
|
|
|
221
221
|
```javascript
|
|
222
222
|
// BEFORE: Direct navigation (no cleanup)
|
|
@@ -227,22 +227,22 @@ const navigation = require('services/navigation')
|
|
|
227
227
|
navigation.open('detail', { id: 123 })
|
|
228
228
|
```
|
|
229
229
|
|
|
230
|
-
## Phase 5:
|
|
230
|
+
## Phase 5: state management
|
|
231
231
|
|
|
232
232
|
**Goal**: Centralize app state for consistency.
|
|
233
233
|
|
|
234
|
-
### Step 1:
|
|
234
|
+
### Step 1: identify scattered state
|
|
235
235
|
|
|
236
236
|
Look for:
|
|
237
237
|
- `Ti.App.Properties.getString/setString` scattered across controllers
|
|
238
238
|
- `Alloy.Globals` for sharing data
|
|
239
239
|
- Direct collection access from multiple controllers
|
|
240
240
|
|
|
241
|
-
### Step 2:
|
|
241
|
+
### Step 2: create state store
|
|
242
242
|
|
|
243
243
|
See [state-management.md](state-management.md) for full implementation.
|
|
244
244
|
|
|
245
|
-
### Step 3:
|
|
245
|
+
### Step 3: migrate state access
|
|
246
246
|
|
|
247
247
|
```javascript
|
|
248
248
|
// BEFORE: Scattered state
|
|
@@ -261,7 +261,7 @@ appStore.setState({ user })
|
|
|
261
261
|
const { user } = appStore.getState()
|
|
262
262
|
```
|
|
263
263
|
|
|
264
|
-
## Migration
|
|
264
|
+
## Migration order
|
|
265
265
|
|
|
266
266
|
Recommended sequence to minimize risk:
|
|
267
267
|
|
|
@@ -271,7 +271,7 @@ Recommended sequence to minimize risk:
|
|
|
271
271
|
4. **Event System** - Replace Ti.App events
|
|
272
272
|
5. **State Management** - Last, as it touches everything
|
|
273
273
|
|
|
274
|
-
## Rollback
|
|
274
|
+
## Rollback strategy
|
|
275
275
|
|
|
276
276
|
For each phase:
|
|
277
277
|
|
|
@@ -289,7 +289,7 @@ For each phase:
|
|
|
289
289
|
Alloy.Events.trigger('user:updated', data)
|
|
290
290
|
```
|
|
291
291
|
|
|
292
|
-
## Common
|
|
292
|
+
## Common migration pitfalls
|
|
293
293
|
|
|
294
294
|
| Pitfall | Consequence | Prevention |
|
|
295
295
|
| -------------------------------- | ------------------- | ------------------------------------ |
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
# Architectural
|
|
1
|
+
# Architectural patterns for Titanium + Alloy
|
|
2
2
|
|
|
3
|
-
## 1. Native
|
|
3
|
+
## 1. Native module abstraction (Wrapper)
|
|
4
4
|
|
|
5
5
|
**Use when:** Using native modules like Maps, Biometrics, or specialized Media players.
|
|
6
6
|
|
|
@@ -41,7 +41,7 @@ exports.BiometricService = {
|
|
|
41
41
|
}
|
|
42
42
|
```
|
|
43
43
|
|
|
44
|
-
## 2. Repository
|
|
44
|
+
## 2. Repository pattern for data
|
|
45
45
|
|
|
46
46
|
**Use when:** Complex data access, multiple data sources, or need to abstract SQLite/API.
|
|
47
47
|
|
|
@@ -98,7 +98,7 @@ exports.UserRepository = {
|
|
|
98
98
|
}
|
|
99
99
|
```
|
|
100
100
|
|
|
101
|
-
## 3. Service
|
|
101
|
+
## 3. Service layer pattern
|
|
102
102
|
|
|
103
103
|
**Use when:** Business logic, orchestrating multiple operations.
|
|
104
104
|
|
|
@@ -148,7 +148,7 @@ exports.AuthService = {
|
|
|
148
148
|
}
|
|
149
149
|
```
|
|
150
150
|
|
|
151
|
-
## 4. Event
|
|
151
|
+
## 4. Event bus for decoupling
|
|
152
152
|
|
|
153
153
|
**Use when:** Decoupled modules need to communicate without knowing about each other.
|
|
154
154
|
|
|
@@ -194,7 +194,7 @@ function cleanup() {
|
|
|
194
194
|
$.cleanup = cleanup
|
|
195
195
|
```
|
|
196
196
|
|
|
197
|
-
## 5. Factory
|
|
197
|
+
## 5. Factory pattern for dynamic views
|
|
198
198
|
|
|
199
199
|
**Use when:** Creating similar views with different configurations.
|
|
200
200
|
|
|
@@ -239,7 +239,7 @@ exports.createProductCard = function(product) {
|
|
|
239
239
|
}
|
|
240
240
|
```
|
|
241
241
|
|
|
242
|
-
## 6. Navigation
|
|
242
|
+
## 6. Navigation service pattern
|
|
243
243
|
|
|
244
244
|
**Use when:** Centralizing navigation with automatic cleanup and history management.
|
|
245
245
|
|
|
@@ -303,7 +303,7 @@ exports.Navigation = {
|
|
|
303
303
|
}
|
|
304
304
|
```
|
|
305
305
|
|
|
306
|
-
## 7. Collection
|
|
306
|
+
## 7. Collection binding pattern
|
|
307
307
|
|
|
308
308
|
**Use when:** Binding API data to ListViews with automatic updates.
|
|
309
309
|
|
|
@@ -346,7 +346,7 @@ $.cleanup = cleanup
|
|
|
346
346
|
</ListView>
|
|
347
347
|
```
|
|
348
348
|
|
|
349
|
-
## 8. Cleanup
|
|
349
|
+
## 8. Cleanup pattern
|
|
350
350
|
|
|
351
351
|
**Use when:** Preventing memory leaks by removing global listeners.
|
|
352
352
|
|
|
@@ -395,7 +395,7 @@ function cleanup() {
|
|
|
395
395
|
$.cleanup = cleanup
|
|
396
396
|
```
|
|
397
397
|
|
|
398
|
-
## 9. Singleton
|
|
398
|
+
## 9. Singleton service pattern
|
|
399
399
|
|
|
400
400
|
**Use when:** Services that should have only one instance app-wide.
|
|
401
401
|
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
# ListView & ScrollView
|
|
1
|
+
# ListView & ScrollView performance
|
|
2
2
|
|
|
3
|
-
## Critical
|
|
3
|
+
## Critical rules
|
|
4
4
|
|
|
5
5
|
1. **NEVER use `Ti.UI.SIZE` in ListView items** - Causes layout recalculation on every scroll
|
|
6
6
|
2. **ALWAYS use fixed heights** - Pre-calculated heights enable fast scrolling
|
|
7
7
|
3. **USE templates** - Reuse view instances instead of creating new ones
|
|
8
8
|
|
|
9
|
-
## Optimized ListView
|
|
9
|
+
## Optimized ListView template
|
|
10
10
|
|
|
11
11
|
```xml
|
|
12
12
|
<!-- views/user/list.xml -->
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
- Use margins on children for spacing (NOT padding on parent)
|
|
48
48
|
- Use `width: Ti.UI.FILL, height: Ti.UI.FILL` for full width + height
|
|
49
49
|
|
|
50
|
-
## Efficient
|
|
50
|
+
## Efficient data binding
|
|
51
51
|
|
|
52
52
|
```javascript
|
|
53
53
|
// controllers/feed/list.js
|
|
@@ -83,7 +83,7 @@ function formatTimestamp(timestamp) {
|
|
|
83
83
|
}
|
|
84
84
|
```
|
|
85
85
|
|
|
86
|
-
## Image
|
|
86
|
+
## Image loading & caching
|
|
87
87
|
|
|
88
88
|
```javascript
|
|
89
89
|
// lib/services/imageCache.js
|
|
@@ -147,9 +147,9 @@ exports.ImageCache = {
|
|
|
147
147
|
}
|
|
148
148
|
```
|
|
149
149
|
|
|
150
|
-
## ScrollView
|
|
150
|
+
## ScrollView performance
|
|
151
151
|
|
|
152
|
-
### Optimizing
|
|
152
|
+
### Optimizing large scrollviews
|
|
153
153
|
|
|
154
154
|
```xml
|
|
155
155
|
<!-- Avoid: Creating many views at once -->
|
|
@@ -163,7 +163,7 @@ exports.ImageCache = {
|
|
|
163
163
|
</ListView>
|
|
164
164
|
```
|
|
165
165
|
|
|
166
|
-
### When
|
|
166
|
+
### When you must use ScrollView
|
|
167
167
|
|
|
168
168
|
```javascript
|
|
169
169
|
// Lazy load content sections
|
|
@@ -211,7 +211,7 @@ function loadSection(sectionId) {
|
|
|
211
211
|
}
|
|
212
212
|
```
|
|
213
213
|
|
|
214
|
-
## ScrollView
|
|
214
|
+
## ScrollView memory management
|
|
215
215
|
|
|
216
216
|
```javascript
|
|
217
217
|
// Release images when scrolled far away
|
|
@@ -239,13 +239,13 @@ function onScroll(e) {
|
|
|
239
239
|
}
|
|
240
240
|
```
|
|
241
241
|
|
|
242
|
-
## Performance
|
|
242
|
+
## Performance checklist (UI)
|
|
243
243
|
|
|
244
|
-
| Area
|
|
244
|
+
| Area | Check |
|
|
245
245
|
| ------------ | ---------------------------------- |
|
|
246
|
-
| **ListView** | Fixed heights on all templates
|
|
246
|
+
| **ListView** | Fixed heights on all templates |
|
|
247
247
|
| **ListView** | Using templates, not dynamic views |
|
|
248
|
-
| **ListView** | Image pre-sizing and caching
|
|
249
|
-
| **Scroll**
|
|
250
|
-
| **Scroll**
|
|
251
|
-
| **Images**
|
|
248
|
+
| **ListView** | Image pre-sizing and caching |
|
|
249
|
+
| **Scroll** | Lazy loading content sections |
|
|
250
|
+
| **Scroll** | Release off-screen images |
|
|
251
|
+
| **Images** | Resized appropriately for display |
|