Table of Contents

Open all
Close all
Preface
17
Who This Book Is For
17
How This Book Is Organized
18
Acknowledgments
20
Conclusion
22
1 Introduction
23
1.1 What Is Clean SAPUI5?
23
1.1.1 What Is Readability?
24
1.1.2 What’s the Story behind Clean SAPUI5?
25
1.2 How to Get Started with Clean SAPUI5
26
1.3 How to Handle Legacy Code
27
1.4 How to Check Code Automatically
29
1.5 How Does Clean SAPUI5 Relate to Other Guides?
29
1.6 Summary
30
2 JavaScript and SAPUI5
31
2.1 JavaScript ES6+ Features
32
2.1.1 Browser Support
32
2.1.2 const Keyword
34
2.1.3 Hoisting and Function Scoping with var
38
2.1.4 Block Scoping with let and const
39
2.1.5 Arrow Functions
39
2.1.6 Template Literals
42
2.1.7 Spread Syntax
44
2.1.8 Destructuring Assignment
57
2.1.9 Promises, async, and await
62
2.1.10 for await of Statements
85
2.1.11 Default Parameters
88
2.1.12 Classes
90
2.1.13 Modules
102
2.2 TypeScript
106
2.2.1 Transpiling and Source Mapping
108
2.2.2 Strong Typing
109
2.2.3 Features
110
2.3 Summary
117
3 Project Structure
119
3.1 Components in SAPUI5
119
3.2 Important Artifacts
122
3.2.1 Component Controller
122
3.2.2 Descriptor
128
3.2.3 Root View
129
3.2.4 The index.html File
129
3.3 Freestyle Applications
129
3.4 SAP Fiori Elements
132
3.4.1 Floorplans
134
3.4.2 Application Generation
137
3.5 Library Projects
139
3.5.1 The library.js File
139
3.5.2 SAPUI5 Reuse Components
140
3.5.3 Folder Structure
140
3.6 Model-View-Controller Assets
142
3.7 Summary
144
4 Modules and Classes
147
4.1 Controller Inflation
148
4.1.1 Model-View-Controller Pattern
148
4.1.2 Object View
152
4.1.3 Dialogs
174
4.2 Module Lifecycle
179
4.2.1 Execution Context
180
4.2.2 Loading and Caching
181
4.2.3 Single-Page Application Lifecycle
184
4.3 Reusability and Testability
187
4.3.1 Defining an Interface
188
4.3.2 Module State
189
4.3.3 Documenting
192
4.3.4 Unit Testing
193
4.3.5 Dependency Mocking
193
4.4 Service Modules versus Class Modules
197
4.4.1 Service Modules
198
4.4.2 Class Modules
200
4.5 Summary
204
5 Functions
205
5.1 Function Definition
205
5.2 The Function Object
206
5.3 Instance Methods
208
5.4 Event Handlers and Callbacks
211
5.5 Callback Execution Context
211
5.6 Getters and Setters
213
5.7 Anonymous Functions
215
5.8 Function Parameters
217
5.8.1 Function Arity
217
5.8.2 Boolean Parameters
222
5.8.3 Rest Parameters
225
5.8.4 Destructuring Parameters
226
5.8.5 Default Values
228
5.9 Promises
230
5.10 Generators
236
5.11 Function Body
237
5.11.1 Do One Thing
238
5.11.2 Descend One Level of Abstraction
239
5.11.3 Keep Functions Small
242
5.12 Invoking Functions
245
5.13 Closures
247
5.14 Summary
248
6 Naming
249
6.1 Descriptive Names
249
6.2 Domain Terms
251
6.3 Design Patterns
252
6.4 Consistency
253
6.5 Shortening Names
254
6.6 Noise Words
255
6.7 Casing
255
6.8 Classes and Enums
257
6.9 Functions and Methods
258
6.9.1 SAPUI5 Common Methods
259
6.9.2 Event Handlers
259
6.10 Variables and Parameters
260
6.10.1 Booleans
260
6.10.2 Loop Variables
261
6.10.3 Comparison Functions and Parameters
264
6.10.4 Event Parameters
264
6.10.5 Constants
264
6.11 Private Members
265
6.12 Namespaces
267
6.13 Control IDs
268
6.14 Hungarian Notation
270
6.15 Alternative Rules
271
6.16 Summary
273
7 Variables and Literals
275
7.1 Variables
275
7.2 Literals
279
7.2.1 Numbers
280
7.2.2 Strings
284
7.2.3 Booleans
288
7.2.4 Regular Expressions
289
7.2.5 Arrays
291
7.2.6 Objects
293
7.2.7 Null and Undefined
295
7.3 Summary
297
8 Control Flow
299
8.1 Conditionals
299
8.1.1 if, else if, and else
300
8.1.2 switch
302
8.2 Loops
303
8.2.1 while Loops
303
8.2.2 do...while Loops
303
8.2.3 for Loops
304
8.2.4 for...of Loops
305
8.2.5 for...in Loops
305
8.3 Conditional Complexity
306
8.3.1 Avoid Empty if Branches
306
8.3.2 Construct Positive Conditions
307
8.3.3 Decompose Complex Conditions
307
8.3.4 Encapsulate Conditionals
308
8.3.5 Avoid Flags as Parameters
309
8.3.6 Avoid Nested if Statements
310
8.3.7 Prefer Declarative Style over Imperative Style
312
8.4 Summary
313
9 Error Handling
315
9.1 throw and try/catch Statements
315
9.2 Using Error Objects
317
9.3 Error Handling Using Messages
318
9.4 Error Handling Using Controls
320
9.5 Error Handling Best Practices
323
9.6 Summary
327
10 Formatting
329
10.1 Motivation
329
10.2 Vertical versus Horizontal Formatting
330
10.2.1 Vertical Formatting
330
10.2.2 Horizontal Formatting
336
10.3 Indentation
339
10.4 XML Views
341
10.4.1 Vertical Distance and Properties
342
10.4.2 Aggregations
344
10.4.3 Bindings
345
10.5 Additional Considerations
347
10.5.1 Tabs versus Spaces
347
10.5.2 Line Endings
348
10.5.3 Dangling Commas
348
10.5.4 Ternary Operators and Inline Logic
349
10.6 Formatting for TypeScript in SAPUI5
351
10.6.1 Types versus Interfaces
351
10.6.2 Classes
353
10.6.3 Definition Files
355
10.6.4 Namespaces and Modules
355
10.6.5 Enums
358
10.6.6 Import Statements
360
10.6.7 Suggested Formatting Standards
360
10.7 Building and Maintaining a Code Style Guide
361
10.8 Formatting Tools
363
10.8.1 Formatting versus Linting
363
10.8.2 EditorConfig
365
10.8.3 Prettier
365
10.9 Summary
368
11 Comments
369
11.1 Express Yourself in Code
369
11.2 The Good: Comment Placement and Usage
371
11.2.1 Intention-Revealing Comments
371
11.2.2 Summary Comments
374
11.2.3 Comments on Variables and Parameter Definitions
376
11.2.4 Parameter Name or Argument Comments
377
11.2.5 JSDoc Comments
378
11.3 The Bad: Comments to Avoid or Refactor
381
11.3.1 Formatting and Alignment
382
11.3.2 Sections and Separators
385
11.3.3 Commented Out Code
387
11.3.4 No-Code Comments
389
11.3.5 Closing Brace Comments
389
11.3.6 Meta-Comments
390
11.4 The Ugly: Special Comments
391
11.4.1 Legal Comments
391
11.4.2 To-Do and Other Code Tags
392
11.4.3 Pragma Comments
393
11.5 Summary
394
12 Static Code Checks and Code Metrics
397
12.1 Linting
399
12.1.1 JavaScript Linters
400
12.1.2 XML Linting
414
12.2 Code Metrics
417
12.2.1 Cyclomatic Complexity
417
12.2.2 Nesting
422
12.2.3 Function Parameters
428
12.2.4 Function Length
430
12.2.5 Fan-In/Fan-Out
431
12.2.6 Code Repetition
433
12.2.7 Maintainability
435
12.3 Summary
437
13 Testing
439
13.1 Principles
440
13.1.1 Write Testable Code
440
13.1.2 Test Pyramid
443
13.1.3 FIRST Principles of Test Automates
444
13.1.4 Test-Driven Development
445
13.1.5 Enable Mocking?
446
13.1.6 UIVeri5 versus OPA5 versus QUnit
447
13.1.7 Page Objects
448
13.1.8 Don’t Obsess about Coverage
450
13.1.9 Readability Rules
451
13.2 Code under Test
451
13.2.1 Meaningful Names for Code under Test
452
13.2.2 Extract the Call to Code under Test into Its Own Test Method
452
13.3 Injection
453
13.3.1 Constructor Injection
454
13.3.2 Setter Injection
454
13.3.3 Sinon.JS
455
13.3.4 Prototype
456
13.3.5 OData V2 Mock Server
457
13.4 Test Methods and Journeys
458
13.4.1 Test Method Names
458
13.4.2 Journeys: The Larger Context of Testing
459
13.4.3 Journey Steps: What Is Being Done
459
13.4.4 Using Given-When-Then
460
13.5 Test Data
461
13.5.1 Make It Easy to Spot Meaning
461
13.5.2 Make It Easy to Spot Differences
462
13.5.3 Use Constants to Describe the Purpose and Importance of Test Data
462
13.5.4 Test Data for OData V2 Mock Server
463
13.6 Assertions
464
13.6.1 Limit Yourself to a Few Focused Assertions
465
13.6.2 Use the Right Assert Type
466
13.6.3 Assert Content, Not Quantity
466
13.6.4 Assert Quality, Not Content
466
13.6.5 Check for Expected Exceptions
467
13.6.6 Write Custom Assertions to Shorten Code and Avoid Duplication
467
13.6.7 Display Meaningful Error Messages in Case of Timeouts for Page Objects
469
13.7 Summary
470
14 TypeScript and Related Technologies
471
14.1 TypeScript
471
14.1.1 Current State
472
14.1.2 Using SAPUI5 with TypeScript
473
14.1.3 Adding TypeScript to an SAPUI5 App
474
14.1.4 Usage Examples
475
14.1.5 How to Stay Updated
485
14.2 Web Components
485
14.2.1 Current State
486
14.2.2 Clean Code with Web Components
488
14.2.3 Usage Examples
489
14.2.4 How to Stay Updated
493
14.3 Fundamental Library
494
14.3.1 Fundamental Styles
494
14.3.2 Fundamental Library
494
14.3.3 Current State
498
14.3.4 How to Stay Updated
498
14.4 Summary
498
15 Implementing Clean SAPUI5
499
15.1 A Common Understanding among Team Members
499
15.2 Collective Code Ownership
500
15.3 Clean Code Developer Initiative
501
15.4 Tackling the Broken Window Effect
503
15.4.1 Static Code Analysis
505
15.4.2 Metrics
505
15.4.3 Code Coverage
506
15.5 Code Review and Learning
506
15.5.1 Code Review Prefixes
507
15.5.2 Style Guides
507
15.5.3 Making Practices Visible
507
15.5.4 Feedback Culture
507
15.6 Clean Code Advisors
509
15.7 Learning Techniques
510
15.7.1 Kata
510
15.7.2 Dojo
511
15.7.3 Code Retreats
511
15.7.4 Fellowship
512
15.7.5 Pair Programming
512
15.7.6 Mob Programming
513
15.7.7 Habits
513
15.8 Continuous Learning in Cross-Functional Teams
514
15.8.1 Profile of a Team Member
514
15.8.2 Cross-Functional Teams
515
15.8.3 Multipliers: Need for Topic Experts in the Team
516
15.8.4 Need for a Community of Practice
516
15.9 Summary
516
The Authors
517
Index
519