Development > Organization > Good practices > Standards... SSP is a easy way to modularize and organize your project. Bringing the idea of OOP to JS, but in a simple way. Using it you gain: - Readability - Understanding of the parties - Modularization - Reuse - Adaptability

1. { @r_mdias - rmdias.com }
git.io/QQ7OIQ

2. { RODOLFO
DIAS }
{ @r_mdias - rmdias.com }

3. { RECIFE - BRAZIL }

4. { FRONT END ENGINEER - UFMG }

5. { / MINAS DEV }

6. { DESIGN
PATTERNS }

7. { DESIGN
PATTERNS }
WHY
USE IT??

9. { DESIGN
PATTERNS ( in JS ) }

10. { → DESIGN PATTERNS (in JS)}
['Factory', 'Prototype', 'Mixin', 'Singleton']

11. { → DESIGN PATTERNS (in JS)}
['Factory', 'Prototype', 'Mixin', 'Singleton']
(A LITTLE
HARD)

12. { DESIGN
PATTERNS ( in JS ) }
(IN
EASY WAY)

13. { SSP }

14. { SSP }

15. git.io/QQ7OIQ

16. git.io/QQ7OIQ

17. { DENNIS
CALAZANS }
denniscalazans.com
contato@denniscalazans.com

18. { RODOLFO
DIAS }
rmdias.com
contact@rmdias.com
{ DENNIS
CALAZANS }
denniscalazans.com
contato@denniscalazans.com

19. { SSP
WHAT’S IT ? }

20. { SSP
HOW IT
WORKS? }

21. { → HOW IT WORKS? }
var SSP = SSP || {};

22. { SSP
USAGE }

23. { → SSP USAGE }
<!-- Call the SSP file -->
<script src="SSP.js"></script>

24. { → SSP USAGE }
// SSP.MyModule.js
SSP.MyModule = {
setUp: function() {
console.debug("My SSP module is runing!");
}
}

25. { → SSP USAGE }
// SSP.MyModule.Child.js
SSP.MyModule.Child = {
setUp: function() {
console.debug("My SSP module is runing!");
}
}

26. { → SSP USAGE }
<!-- Incorporating Files -->
<script src="SSP.js"></script>
<script src="SSP.MyModule.js"></script>
<script src="SSP.MyModule.Child.js"></script>
<script>SSP.init();</script>

27. { SSP
METHODS
AND
PROPERTIES }

28. { → SSP - PROPERTIES / _nameSpace }
// All modules have a property called nameSpace that
// returning string the name of module.
SSP.MyModule = {
setUp: function() {
var self = this;
console.debug(self._nameSpace);
// return -> "SSP.MyModule"
}
}

29. { → SSP - METHODS / .setUp( ) }
// SetUp is a Main method.
// It always runs when the father's module is called.
SSP.MyModule = {
setUp: function() {
console.debug(‘My SSP Module is running!’);
// return -> "My SSP Module is running!"
}
}

30. { → SSP - METHODS / .init( ) }
// This method initialize all modules from your application.
SSP.init();
SSP.init(SSP.MyModule);
SSP.init(SSP.MyModule, SSP.MyOtherModule);

31. { → SSP - METHODS / .applyByNamespace(‘namespace’, params) }
// Using this you can run a method that's located in other
// module/part from your application, but using `_namespace`.
// For example:
SSP.applyByNamespace(‘SSP.MyModule');
// SSP.MyModule();

32. { → SSP - METHODS / .applyByNamespace(‘namespace’, params) }
// Using this you can run a method that's located in other
// module/part from your application, but using `_namespace`.
// For example:
SSP.applyByNamespace(‘SSP.MyModule’, SomeParameter);
// SSP.MyModule(SomeParameter);

33. { → SSP - PROPERTIES AND METHODS }
// Available Methods
- _nameSpace;
- .init();
- .setUp();
- .delegate(scope, method);
- .readModule(Module);
- .getByNamespace('namespace');
- .applyByNamespace('namespace');
- .initModuleByNamespace('nameSpace', params);

34. { EXAMPLE
→ TODO APP }

35. { → TODO APP }

36. { EXAMPLE
→ TODO APP }
(HOW
WE DO)

37. { → TODO APP }
<script src="Todo.js"></script>

38. { → TODO APP }
'use strict';
function createTask(){
// body...
};

39. { → TODO APP }
'use strict';
function updateTask(taskID){
// body...
};

40. { → TODO APP }
'use strict';
function deleteTask(taskID){
// body...
};

41. { → TODO APP }
'use strict';
function completeTask(taskID){
// body...
};

42. { → TODO APP }
'use strict';
function buildTasksList(tasks) {
// body...
};

43. { → TODO APP }
var form, completeTaskButton, deleteTaskButton, updateTaskButton;
form = document.querySelector('.submit-task');
completeTaskButton = document.querySelector('.complete-task');
deleteTaskButton = document.querySelector('.delete-task');
updateTaskButton = document.querySelector('.update-task');

44. { → TODO APP }
form.addEventListener('submit', function(e) {
createTask(taskName);
buildTasksList(tasks);
// body...
});

45. { → TODO APP }
completeTaskButton.addEventListener('click', function(e) {
completeTask(taskID);
buildTasksList(tasks);
// body...
});

46. { → TODO APP }
deleteTaskButton.addEventListener('click', function(e) {
deleteTask(taskID);
buildTasksList(tasks);
// body...
});

47. { → TODO APP }
updateTaskButton.addEventListener('click', function(e) {
updateTask(taskID);
buildTasksList(tasks);
// body...
});

48. 'use strict';
function createTask(){
// body...
};
function updateTask(taskID){
// body...
};
function deleteTask(taskID){
// body...
};
function completeTask(taskID){
// body...
};
function taskCounter(tasks){
// body...
};
function buildTasksList(tasks) {
// body...
};

49. 'use strict';
function createTask(){
// body...
};
function updateTask(taskID){
// body...
};
function deleteTask(taskID){
// body...
};
function completeTask(taskID){
// body...
};
function taskCounter(tasks){
// body...
};
function buildTasksList(tasks) {
// body...
};
|
:(

50. var form, completeTaskButton, deleteTaskButton, updateTaskButton;
form = document.querySelector('.submit-task');
completeTaskButton = document.querySelector('.complete-task');
deleteTaskButton = document.querySelector('.delete-task');
updateTaskButton = document.querySelector('.update-task');
form.addEventListener('submit', function(e) {
createTask(taskName);
buildTasksList(tasks);
// body...
});
completeTaskButton.addEventListener('click', function(e) {
completeTask(taskID);
buildTasksList(tasks);
// body...
});
deleteTaskButton.addEventListener('click', function(e) {
deleteTask(taskID);
buildTasksList(tasks);
// body...
});
updateTaskButton.addEventListener('click', function(e) {
updateTask(taskID);
buildTasksList(tasks);
// body...
});
|
:(

51. var form, completeTaskButton, deleteTaskButton, updateTaskButton;
form = document.querySelector('.submit-task');
completeTaskButton = document.querySelector('.complete-task');
deleteTaskButton = document.querySelector('.delete-task');
updateTaskButton = document.querySelector('.update-task');
form.addEventListener('submit', function(e) {
createTask(taskName);
buildTasksList(tasks);
// body...
});
completeTaskButton.addEventListener('click', function(e) {
completeTask(taskID);
buildTasksList(tasks);
// body...
});
deleteTaskButton.addEventListener('click', function(e) {
deleteTask(taskID);
buildTasksList(tasks);
// body...
});
updateTaskButton.addEventListener('click', function(e) {
updateTask(taskID);
buildTasksList(tasks);
// body...
});
|
: (`

52. { EXAMPLE
→ TODO APP }
(HOW TO DO
USING SSP)

53. { → TODO APP }
<script src="SSP.js"></script>

54. { → TODO APP }
<script src="SSP.js"></script>
<script src="SSP.Todo.js"></script>

55. { → TODO APP }
<script src="SSP.js"></script>
<script src="SSP.Todo.js"></script>
<script src="SSP.Todo.Requests.js"></script>

56. { → TODO APP }
<script src="SSP.js"></script>
<script src="SSP.Todo.js"></script>
<script src="SSP.Todo.Requests.js"></script>
<script>SSP.init();</script>

57. { → TODO APP }
// SSP.Todo.JS
SSP.Todo = {
setUp: function() {
var self = this;
},
createTask : function() {
// body...
},
buildTasksList : function(todoList){
// body...
}
}

58. { → TODO APP }
// SSP.Todo.Requests.js
SSP.Todo.Requests = {
setUp: function() {
var self = this;
},
getTodoList : function() {
// body...
},
setTodoList : function(parameter) {
// body...
}
}

59. // SSP.Todo.JS
SSP.Todo = {
setUp: function() {
},
createTask : function() {
var self = this;
},
updateTask : function(taskID) {
// body...
},
updateTask : function(taskID) {
// body...
},
deleteTask : function(taskID) {
// body...
},
completeTask : function(taskID) {
// body...
},
buildTasksList : function(todoList){
// body...
}
}

60. // SSP.Todo.JS
SSP.Todo = {
setUp: function() {
SSP.Todo.createTask();
},
createTask : function() {
var self = this;
},
updateTask : function(taskID) {
// body...
},
updateTask : function(taskID) {
// body...
},
deleteTask : function(taskID) {
// body...
},
completeTask : function(taskID) {
// body...
},
buildTasksList : function(todoList){
// body...
}
}

61. // SSP.Todo.JS
SSP.Todo = {
setUp: function() {
X
SSP.Todo.createTask();
},
createTask : function() {
var self = this;
},
updateTask : function(taskID) {
// body...
},
updateTask : function(taskID) {
// body...
},
deleteTask : function(taskID) {
// body...
},
completeTask : function(taskID) {
// body...
},
buildTasksList : function(todoList){
// body...
}
}

62. // SSP.Todo.JS
SSP.Todo = {
setUp: function() {
var self = this;
self.createTask();
},
createTask : function() {
var self = this;
},
updateTask : function(taskID) {
// body...
},
updateTask : function(taskID) {
// body...
},
deleteTask : function(taskID) {
// body...
},
completeTask : function(taskID) {
// body...
},
buildTasksList : function(todoList){
// body...
}
}

63. // SSP.Todo.JS
SSP.Todo = {
setUp: function() {
var self = this;
self.createTask();
self.buildTasksList(self.Requests.getTodoList()); // accessing module in another file
},
createTask : function() {
var self = this;
},
updateTask : function(taskID) {
// body...
},
updateTask : function(taskID) {
// body...
},
deleteTask : function(taskID) {
// body...
},
completeTask : function(taskID) {
// body...
},
buildTasksList : function(todoList){
// body...
}
}

64. // SSP.Todo.JS
SSP.Todo = {
setUp: function() {
var self = this;
self.createTask();
self.buildTasksList(self.Requests.getTodoList()); // accessing module in another file
},
createTask : function() {
var self = this;
self.Requests.setTodoList(todoList);
},
updateTask : function(taskID) {
// body...
},
updateTask : function(taskID) {
// body...
},
deleteTask : function(taskID) {
// body...
},
completeTask : function(taskID) {
// body...
},
buildTasksList : function(todoList){
// body...
}
}

65. // SSP.Todo.JS
SSP.Todo = {
setUp: function() {
var self = this;
self.createTask();
self.buildTasksList(self.Requests.getTodoList()); // accessing module in another file
},
createTask : function() {
var self = this;
self.Requests.setTodoList(todoList);
self.buildTasksList(self.Requests.getTodoList());
},
updateTask : function(taskID) {
// body...
},
updateTask : function(taskID) {
// body...
},
deleteTask : function(taskID) {
// body...
},
completeTask : function(taskID) {
// body...
},
buildTasksList : function(todoList){
// body...
}
}

66. // SSP.Todo.JS
SSP.Todo = {
setUp: function() {
var self = this;
self.createTask();
self.buildTasksList(self.Requests.getTodoList()); // accessing module in another file
},
createTask : function() {
var self = this;
self.Requests.setTodoList(todoList);
self.buildTasksList(self.Requests.getTodoList());
},
updateTask : function(taskID) {
// body...
},
updateTask : function(taskID) {
// body...
},
deleteTask : function(taskID) {
// body...
},
completeTask : function(taskID) {
// body...
},
buildTasksList : function(todoList){
// body...
}
}
|
: (

67. // SSP.Todo.Requests.js
SSP.Todo.Requests = {
setUp: function() {
var self = this;
},
getTodoList : function() {
// body...
},
setTodoList : function(parameter) {
// body...
}
}
|
: (

69. { → TODO APP }

70. git.io/QQ7OIQ

71. { SSP
→ WHO USES IT? }

73. git.io/QQ7OIQ

75. { VLW, FLWS O/ }
{ @r_mdias - rmdias.com }

76. { THANKS!! }
{ @r_mdias - rmdias.com }