SHARE
TWEET

Untitled

a guest Aug 20th, 2016 66 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. # TOC on frontendmasters.com
  2.  
  3. ## framework overview
  4.  
  5. 0:00:00 - 00:04:21
  6. Introduction
  7. Brian Holt (@holtbt) leads off the course with a brief introduction of himself and why you may want to learn the differences in JavaScript frameworks. These frameworks help developers use MVC patterns in their applications. Choosing the best frameworks often depends on your use case and preference.
  8. 00:04:22 - 00:16:44
  9. Internal Mechanics
  10. Brian overviews each framework he will be discussing throughout the course and explains their internal mechanics. He discusses Angular, Ember, Backbone and React.
  11. 00:16:45 - 00:19:44
  12. Project Setup
  13. With each framework, Brian will be building a simple Todo application to help demonstrate their similarities and differences. The source code, notes and slides for this course are located in his GitHub account.
  14. - https://github.com/btholt/jsmvc-pres
  15.  
  16. ## angularjs
  17.  
  18. 00:19:45 - 00:29:33
  19. bootstrapping
  20. Brian begins the Angular Todo application with a little bootstrapping. The stubs out the application-level configuration module. While there isn’t any configuration needed, he discusses how you may configure your Angular applications. After this he creates a controller and generates some default data to populate the Todo application.
  21. - https://github.com/btholt/jsmvc-pres/tree/master/empty-projects/ng-todo
  22. 00:29:34 - 00:39:45
  23. Adding HTML
  24. With some initial bootstrapping out of the way, Brian links up the application and controller with the HTML. He also demonstrates how two-way data binding in Angular
  25. 00:39:46 - 00:46:49
  26. Looping with hg-repeat
  27. The ng-repeat directive in Angular functions like a for loop. It will loop over an array in the controller and output a block of HTML for every object in the array. Brian adds an hg-repeat and uses it to display the list of Todo items.
  28. 00:46:50 - 00:58:38
  29. Adding Interactivity
  30. Until now, the application is only displaying the todos in our array. Brian adds a few functions that will add todos and remove todos when the user interacts with the application. He notes that any modifications to the todos array are automatically reflected in the UI because of the two-way data binding.
  31. 00:58:39 - 01:06:18
  32. Angular Extras
  33. Brian finishes the Angular Todo application and demonstrates the a few additional Angular features. He talks a little about the power of directives and filters. He also answer some last questions from the audience.
  34. 01:06:19 - 01:14:54
  35. Angular Directives
  36. Directives are an extremely powerful feature in Angular. They allow developers to add custom HTML elements or attributes into the DOM. These elements or attributes are modular and can be easily reused.
  37. 01:14:55 - 01:21:22
  38. Angular Filters
  39. Filters in Angular take in an input and will return a manipulated version of that input. The input can be a string with the returned value being a modified version. The input could also be an array with the return value being a filtered or sorted version of the array.
  40. 01:21:23 - 01:28:07
  41. Angular Services
  42. Brian briefly describes how services work in Angular. Services are used to communicate with external APIs or to pass data between controllers within the application.
  43.  
  44. ## ember
  45.  
  46. 01:28:08 - 01:39:18
  47. Bootstrapping & Controllers
  48. Unlike Angular, Ember has a few dependencies. jQuery and Handlebars must be included in the application for Ember to work. After declaring the Ember application, Brian creates a Router to handle the different routes (or URLs) within the application. He also defines the model for the Todo application.
  49. - https://github.com/btholt/jsmvc-pres/tree/master/empty-projects/emb-todo
  50. 01:39:19 - 01:51:12
  51. Controller
  52. Brian creates the controllers for the Todo application. Within the controller, there’s an action object that will contain all the event logic for the application. He then defines an adapter. Adapters in Ember are where the data will be loaded. This modular feature makes it easy to switch from mock data to remote data without affecting the application logic.
  53. 01:51:13 - 02:04:32
  54. Templating
  55. Brian demonstrates how Ember uses script tags to surround blocks of HTML code that will be manipulated by Ember and be a source for the bootstrapping the data into the user interface. The Ember data and logic is injected using Handlebar notation.
  56. 02:04:33 - 02:08:00
  57. Code review
  58. At this point the Todo application is working. Brian takes a few minutes to answer some audience question and troubleshoot some issues. Since Ember requires quite a bit of bootstrapping, Brian also reviews the application code to this point before moving forward.
  59. 02:08:01 - 02:20:41
  60. Actions
  61. Actions are added at the component level but they don’t contain any logic. They notify the parent router of the event and let the router determine what should happen. This further decouples the UI from the controller.
  62. 02:20:42 - 02:28:34
  63. Actions, continued
  64. Brian adds the action to clear any completed todo’s from the list. He also talks about how two-way data binding is implemented in Ember and how it differs from Angular.
  65. 02:28:35 - 02:37:52
  66. Ember Questions
  67. With the Ember todo application now complete, Brian spends some time answering questions from the audience around debugging and unit testing.
  68.  
  69. ## backbone
  70.  
  71. 02:37:53 - 02:46:36
  72. ## bootstrapping
  73. Like Ember, Backbone uses a Router to handle the different states of the application. Brian starts by creating the Router and hooking it into the application. Brian also creates a Model and a Collection. A Collection in Backbone is an array of Model objects.
  74. - https://github.com/btholt/jsmvc-pres/tree/master/empty-projects/bb-todo
  75. 02:46:37 - 02:58:53
  76. Views
  77. Brian creates the view for the Backbone todo application. The render function inside a view is the engine the drives the view. It’s responsible for updating the view whenever there is a change in state. The view uses templates which are snippets of HTML. These snippets are depending on the Underscore tempting library.
  78. 02:58:54 - 03:11:37
  79. Backbone MVC
  80. Now that Brian has all the pieces in place for the Backbone todo application, it’s time to wire it together. In the Router (controller) he instantiates the view and populates it with the collection (model). He also creates add, reset, and destroy events in the view to handle user interactions.
  81. 03:11:38 - 03:21:03
  82. Filtering
  83. The next task is to clear the completed todo items. This logic would be easy to add into the View, however it’s best placed in the Model where the data is stored. Brian demonstrates how to code the View to trigger the filter function inside the Model.
  84. 03:21:04 - 03:31:59
  85. Adding and Toggling Todo Items
  86. As the users toggles each todo item, the view will fire an event which will call a toggle method inside the model. Similar to filtering, keeping the toggle logic inside the view is a good separation of concerns. Brian also adds the ability to add new todo items.
  87. 03:32:00 - 03:37:35
  88. Two-way Data Binding
  89. Backbone relies on getters and setters for two-way data binding. Trigging the data binding has to come from events declared in the view. Brian creates and update method in the view that will call the setter functions in the model.
  90. 03:37:36 - 03:45:20
  91. Backbone Q&A
  92. Brian wraps up the Backbone section by answer a number of questions form the audience. He also describes the differences in architecture between Backbone and Angular.
  93.  
  94. ## react
  95.  
  96. 03:45:21 - 03:51:14
  97. Setup
  98. React uses a JSX Transformer that Brian will discuss more later. Because of this, Brian suggests running an HTTP server for this project. He demonstrates how to use NPM to install and startup the http-server node module. Brian also introduces JSX which, like CoffeeScript, transpiles into native JavaScript.
  99. - https://github.com/btholt/jsmvc-pres/tree/master/empty-projects/react-todo
  100. 03:51:15 - 03:54:33
  101. Bootstrapping
  102. Because React is not opinionated on file structure, developers have a lot of freedom with bootstrapping. Brian demonstrates how he sets up each file in his React applications. This includes an app declaration and an immediately invoked function.
  103. 03:54:34 - 04:03:02
  104. JSX
  105. Brian begins building the application. He incorporates the JSX code into the application. In this case, the JSX markup is returned by the render function of the TodoApp component.
  106. 04:03:03 - 04:07:20
  107. Creating Components
  108. Brian starts adding some boilerplate code for components he’s going define. These components are added in the application using the JSX syntax. As Brian creates each component, he adds a render function that is responsible for defining the components JSX.
  109. 04:07:21 - 04:16:19
  110. Component Lifecycle
  111. A React component has several functions that get run throughout its lifecycle. Properties within a component flows down from the parent. States, however are mutable by a component.
  112. 04:16:20 - 04:27:59
  113. Passing Properties from Parent
  114. Brian demonstrates how to pass properties down from the parent to the TodoList component. He gives this component a todos property. Brian then modifies the render method inside the TodoList component to work with this newly added property.
  115. 04:28:00 - 04:35:52
  116. Modifying Data
  117. Up to this point, the user interface cannot be changed because the underlying data is not modified. Each render will updated the UI with the original data. Brian modifies the application to receive updates from the users and make changes to the data and state.
  118. 04:35:53 - 04:45:38
  119. Finishing the Interactivity
  120. Brian adds the same data/state update code to the rest of the user interface components. In this case, he implements the toggle and delete functions. He also discusses some best practices for code organizations in React applications.
  121. 04:45:39 - 04:53:52
  122. Creating New Todos
  123. Brian implements the new todo functionality for the application. He also answers few questions from the audience on the future of React.
  124. 04:53:53 - 05:04:02
  125. Giving New Todo a State
  126. Now that the user can create new todo objects, they need to be added to the array of todos. This requires the todo objects to have a state. Brian demonstrates how to give the new todo object a state and perpetuate the data throughout the application with two-way data binding.
  127. 05:04:03 - 05:10:01
  128. Clear Completed
  129. The final feature needing implantation is the cleaning of completed todo items. Brian codes the clear completed functionality and then goes into a discussion on why you'd choose React.
  130. 05:10:02 - 05:20:29
  131. React Questions
  132. Brian ends the React section by addressing some audience questions. He talks a little about his personal experience with React and how he unit tests React using Karma, Grunt, and Jasmine.
  133.  
  134. ## wrap-up
  135.  
  136. 05:20:30 - 05:27:17
  137. Unsolicited Opinions
  138. Brian wraps up the course giving his opinions on each framework he covered. He gives some insight into which scenarios are best for each framework and when to avoid them.
  139. 05:27:18 - 05:32:52
  140. Extended Features
  141. In some cases, this course just scratched the surface in each of these frameworks. They have many extended features that can be game-changers when developing applications. Brian gives a quick run-down of some of the great things each framework brings to the table outside their core features.
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top