Don't like this style? Click here to change it! blue.css
Step one, we should go to the end of the last lecture and practice inheritance.
OK great.
Now, take a look at this wacky "mixin" example:
See the Pen ZQXWdv by Andy Novocin (@AndyNovo) on CodePen.
Prototype Task: Create a new Class that extends the PersonClass. Can your new
class use sayName? The Mayor can.
Read more at https://addyosmani.com/resources/essentialjsdesignpatterns/book/#mixinpatternjavascript
This is a buzzword that carries a lot of meaning and yet doesn't say much. To me it point an ideal separation of your logic (the model) which exists in its own cloud-land of abstraction and your presentation (the view) which is a fairly dumb rendering of the current state of your model. The controller processes user interactions which it translates into a language the model understands. Starting in the 2010s there have been a large number of Javascript MVC frameworks (check out http://todomvc.com/ to see the same app written in many styles ). Each of them has their own interpretation of MVC so don't go looking for some perfect vision instead: imagine your app running entirely from the command line. The visuals and interface become abstract and you should be tempted to keep a consistent language of your "domain". Now put a layer which "draws" your app. That is what MV* shoots for (IMHO… this issue invites trolling).
See the Pen bEryyw by Andy Novocin (@AndyNovo) on CodePen.
Health Task: Edit the above game so that each hero has some health. When the hero gets sick it loses 1 health. If you click a hero that hero gains a health. Display the health in it's div. Honor the MVC separation.
So code structure in javascript is interesting to me. The default way of having multiple file javascript
programs is to have several <script src="fileX.js"> tags. This suffers from some problems
(but is good enough for your first project). A better way is to structure your files as modules which you import
in some way. ES5 and below don't have native support for this. There are nice libraries that allow you to pull
that off like requireJS and commonJS. But learning those has a .5-1 day learning
curve. ES6 has a module loading system which will be pleasant and I'm looking forward to wide usage of it. The
other thing that bothers me here is that nodeJS allows Javascript on the server but their methodology is very
different from browser-only code. The ideal is that you make clean modules as files and use them on either
client-side or server-side interchangeably.
Now we do have some nice options for making modules now: Like the pattern in our book.
ECMAScript2015 will have keyword support for classes. The support is not universal yet but we can play immediately with these using Babel in any of our snippet engines.
Do so now if you are inclined to.
It was requested that I allocate some time for your groups to work together. If there is time leftover then gather and code!