Class Going too Fast?

1. Class Going too Fast? • No time to reflect… cannot fully absorb • You are asked to reflect frequently, however one thing often builds on another. • Programming is a skill that you cannot absorb. • You will never fully understand anything. However your understanding will deepen and will get better and better at understanding and applying things as your skill improves.

2. Too Much Self-Learning • Screencasts, readings and practice WODs are your “textbook” materials. • There is no expectation that you learn everything on your own! • The materials are set up to learn and build skill. • There will always be challenges which we hope to identify and overcome though class sessions • It is suggested that you be an “active” viewer of screencasts. The screencasts are your “textbook” readings. Follow along with the examples rather than just watch. Go back to the screencasts as needed. Come to class with requests for elaboration and examples. • If you are pressed for time, just go through the presentation slides and skip to the parts of the screencast where you have problems

3. ITM 352Assignment 1Workshop

4. Announcements • Assignment #1 due very soon! • You will not be able to just modify a WOD and submit as your assignment! • You MAY use code from WODs (or anywhere else) • You must upload to the class website • Follow the requirements in A1 for deployment carefully so that the grader will be able to check your app • Don’t forget to test it! • Put “your own touch” on this application • Do what you think is best, not just what is easy do implement • Think about what makes sense, as a consumer, for your particular application • Don’t forget to go through the quality checklist! • Submission is a little tricky… let’s look at this now!

5. Prototyping Your UI • You need to plan how your UI will look/feel: • develop an example product display page with a form and invoice page • this can be mocked up; the pages do not have to work or use any Javascript • think about the steps a user will take and what information you will validate (and how)

6. Data and Data Structures • Think about what data you need to store. • Now create a data-structure, using JSON, to represent this data. • Think about how you will validate and manipulate this data. • Create methods for this validation and manipulation.

7. Other Considerations • Validate quantities on invoice page? • Duplicate products info on products and invoice pages? • Include files rather than re-directing?

8. Modularity • Modularity is the creation of simple modular parts that work together to perform tasks • Each part is “encapsulated” or “hidden” from other parts in some way by an interface • Some ways to encapsulate modules: • Different files • Functions • Objects • Discussion: what is the interface for each of the above?

9. Basic Architecture Advice • Always try to eliminate redundancy by modularizing data • "One file, one concern" – modularize tightly related activities and functions • Balance complexity of interaction of parts versus complexity of the parts • Modularize shared functionality (see functional modularity next)

10. Architecture/Design Options and Concerns

11. Assignment #1 Self-Processing Option Selected quantities • Discussion • How will the server get the sections? • What is good about this approach? • What are the shortcomings of this approach? • Under what conditions would you use this approach? • What functions might you define here? Display Products and Invoice Page See Asssignment1_1file for example

12. Assignment #1 Separate Processing Option Selected products and quantities Display Invoice Page Display Products Page • Discussion • How will the server get the sections? • What is good about this approach? • What are the shortcomings of this approach? • Under what conditions would you use this approach? • What functions might you define here? See Asssignment1_2 file for example

13. Assignment #1 Server Generated Option Server Request display Respond generate invoice page Respond generate display page Display Invoice Page Display Products Page process selected quantities request • Discussion • How will the server get the sections? • What is good about this approach? • What are the shortcomings of this approach? • Under what conditions would you use this approach? • What functions might you define here? See Asssignment1_MVC for example

14. Assignment #1 Micro-Service Option Server Request products respond product data Respond invoice data Display Products and Invoice Page process selected quantities request • Discussion • How will the server get the sections? • What is good about this approach? • What are the shortcomings of this approach? • Under what conditions would you use this approach? • What functions might you define here? See Asssignment1_MicroService for example

15. Exercise:Passing Data With Redirect <META http-equiv ="refresh" content="0;URL=http://www.google.com?data1=value1&data2=value2"> <script> window.location = './process_data.html?data1=value1&data2=value2'; // In server you might use // res.writeHead(301, { "Location": "http://amazon.com?data1=value1&data2=value2"}); </script> • How can you pass the form data from a self-processing page? • When might such a situation arise?

16. Exercise:Server Shared Data <script src="product_data.js"></script> • Put data in .js file and import: • <script src="product_data.js"></script> • data = require("product_data.js"); • File must be served on GET either static or dynamically • Not ideal because the data is stored as code and not easy to manipulate or use with non-JS components (e.g. database) • Generate on the server the page that needs the data • Use fetch() to get the data from the server

17. Generating a Display/Invoice • You already know how to to this. See SmartPhoneProducts3. Invoice 1_1 can be easily modified to use a loop and array of products. • Just replace the array with the JSON array you made for your products • The key problem is connecting the quantities selected to the products • Simplest way is to use the array index to keep track of which quantity selected is for which product

18. E4 Essay • Please do your E4 Essay after Assignment 1 or when you are nearly done • Always remember that this is your class and we care about your success! • We will do whatever we can to help but we cannot read your minds… • It’s very important at this point in the class to reflect on your progress. • Acknowledge your progress as well as understanding you have more to do • Very common to lack confidence and maybe feel a bit frustrated • Many people feel they are not ready for the next phase of class • Do you know what the next phase is? We are already there!