Ömer: Separation of Concerns, 3

[omerjava]

Learning Objectives

• [x] 🥚 event-driven programming: identify the concept in a JS program via listeners & handlers
• [ ] 🥚 entry points: describe what an entry point is, there are 2 kinds in the programs for this module - initialization & interaction. identify them in a program
• [x] 🥚 function roles: describe what function roles are and why they're important. they can identify a function's role given checklists for each role covered in this module:
• [x] 🥚 listeners: functions that attach event listeners to the DOM
• [x] 🥚 handlers: entry point for user interactions
• [x] 🥚 utils (utilities): pure functions to help do things with data
• [x] 🐣 components: render data into DOM elements to display for the user
• [ ] 🐥 custom events: create custom events events in your components, passing useful data between components and handlers
• [x] 🥚 DOM access: You read and write values from the DOM in an event handler
• [ ] 🥚 es5 vs. es6: You can demonstrate the change in developer-experience pre and post es6 by stepping through in the debugger and explaining differences in scoping (global vs. script, block vs. local, modules) between two programs with identical user experience but different implementations.
• [ ] 🥚 Scope Hierarchy: You is comfortable navigating different scopes in the browser's debugger to understand an existing application (script, module, closure, local, block)
• [x] 🥚 Code Splitting: You can ES Modules to split your code into multiple files & folders according to function role, data, listeners and initialization. They can use generated dependency diagrams and documentation to understand and navigate this folder structure.
• [x] 🥚 Dependency Graphs: You can use a project's dependency graph to understand how it is organized and to navigate the source code.
• [ ] 🥚 Development Strategies: You can write development strategies that have all of the program's data defined at the beginning, and separate each user story into interface and interaction tasks.
• [x] 🐣 Naming Functions: You can come up with clear and helpful names for the functions in your program. A good function name will take into account the function's role and the program's domain, like in the /naming-variables exercises from Debugging.
• [x] 🐣 DOM manipulation: You can manipulate the DOM when implementing level-appropriate user interactions
• [ ] 🐣 Isolating Components: You can use a test.html file to render your components with different inputs
• [x] 🐣 Forms: You can do basic handling of form data via event.target.form
• [x] 🐣 Handling events: You can use the event argument to process user interactions, including bubbled events using event.target
• [ ] 🐣 Passing Component Unit Tests: You can write vanilla DOM component functions to pass provided unit tests
• [ ] 🐣 refactoring: refactor a single-script tutorial-style web page into multiple files using imports and exports
• [ ] 🐥 reverse-engineering: You can incrementally reverse-engineer a level-appropriate user interaction following these steps: ui -> listener -> handler (-> logic and/or -> component)
• [x] 🐔 From Spec: given user stories, You can develop a site from scratch using a template repository.
• [ ] 🐔 Writing Component Unit Tests: You can write unit tests to validate your component functions using BDD syntax

[omerjava]

Week 1

• [x] pushed my progress to practice repo

Check-In

I Need Help With:

-

What went well?

• I understand better using addeventlistener() method with different type of events and handlers
• I'm getting familiar with separation of different files/issues (HTML, CSS, JS (init.js, listeners, handlers, logic, components)) when building a website. Although it is useful in many aspects, it also makes the building process more complicated. Maybe, it will be easier after get used to it.

What went less well?

• As a feedback or suggestion, I would like to share my opinion about Sunday classes from 12.00-16.00. As everybody knows, it is the only lesson time we have apart from some extra workshops. I think that it can be more beneficial for the majority, if we use all of this lesson time by listening a lecture from a coach or coaches instead of making small group exercises. A coach can solve slowly a lot of examples and exercises from our Github study material by explaining important concepts and methods. Recently, I feel that I learn little during class time, because indeed very little lecturing by coach and most of time passes with group study. Group study is also useful of course to review and discuss code together, but students can do it later if they want. And also, I feel that students who are a bit behind in the curriculum have more difficulty to follow in group exercises during Sunday classes. Because students who know more about topic do exercise fast and maybe also explain fast, but it is difficult to catch for everybody in the group. It would be nice to hear from classmates also about my suggestion. It is worth to think about it, I think.

Lessons Learned

• I have a better understanding of template literals to add HTML tags directly to innerHTML now.
• Using event.target, event.type, import, export, data.js file with an object,
• Using event parameter in handler functions

Sunday Prep Work

• Reading the suggested study materials

[gelilaa]

Thank you for your suggestion/feedback. We understand that the Sunday classes are focused on more on group study, and they are purposely designed to be a group study so that everyone can participate and teach themselves instead of listening to someone talking about it for an hour or two. We believe that learning by doing is the most effective way.

And we also recognize that everyone cannot be in the same level in one group. That is why it is important to practice pair-programming and help each other with exercises and take turns on sharing the screen. If the student in the group knows more about the topic than others, its is better that the others share their screen and he/she can explain how he/she understands the problem.

We appreciate your feedback and we would also like to hear from your peers on this topic.

[omerjava]

Week 2

• [ ] pushed my progress to practice repo

Check-In

I Need Help With:

-

What went well?

• I study well.

What went less well?

- 

Lessons Learned

• I understand better using object for data store.
• I am getting better with separating js files according to their roles.

Sunday Prep Work

• Studying