Skip to content

Commit 8974129

Browse files
w3cjw3cj
committed
✨ Add slides and code
1 parent 7a32720 commit 8974129

File tree

6 files changed

+300
-2
lines changed

6 files changed

+300
-2
lines changed

‎README.md

+158
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<!-- .slide: data-background-video="https://cdn.flixel.com/flixel/3xo6k0xjskua68hvklng.hd.mp4" data-background-video-loop="loop" data-background-video-muted -->
2+
3+
<div style="background:rgba(0,0,0,0.5);padding:0.5em;">
4+
<h3>🍦 🍦 Vanilla JS 🍦 🍦</h3>
5+
<p>with CJ R.</p>
6+
</div>
7+
8+
---
9+
10+
# M.V.C.
11+
12+
---
13+
14+
## We will need:
15+
* App
16+
* Component
17+
* model
18+
* view
19+
* controller
20+
* Router
21+
* API
22+
23+
---
24+
25+
<!-- .slide: data-background-video="https://media.giphy.com/media/PuWNMebKGIKNG/giphy.mp4" data-background-video-loop="loop" data-background-video-muted -->
26+
27+
---
28+
29+
# CODE
30+
31+
---
32+
33+
<!-- .slide: data-background-video="https://cdn.flixel.com/flixel/i468879vb71u0in11pk8.hd.mp4" data-background-video-loop="loop" data-background-video-muted -->
34+
35+
<div style="background:rgba(0,0,0,0.5);padding:0.5em;">
36+
<h3>As a lonely dog, I want to see a list of all of the dogs that are available so that I can see my dating options.</h3>
37+
</div>
38+
39+
---
40+
41+
<!-- .slide: data-background-video="https://media.giphy.com/media/26xBEamXwaMSUbV72/giphy.mp4" data-background-video-loop="loop" data-background-video-muted -->
42+
43+
---
44+
45+
<!-- .slide: data-background-video="https://media.giphy.com/media/NmGbJwLl7Y4lG/giphy.mp4" data-background-video-loop="loop" data-background-video-muted -->
46+
47+
---
48+
49+
<!-- .slide: data-background-video="https://cdn.flixel.com/flixel/a9swtmggzjzd5qsgtxhc.tablet.mp4" data-background-video-loop="loop" data-background-video-muted -->
50+
51+
<div style="background:rgba(0,0,0,0.5);padding:0.5em;">
52+
<h3>As a lonely dog, I want to be able to link to a specific dog so that I can share my favorite dogs with my friends.</h3>
53+
</div>
54+
55+
---
56+
57+
<!-- .slide: data-background-video="https://media.giphy.com/media/26xBEamXwaMSUbV72/giphy.mp4" data-background-video-loop="loop" data-background-video-muted -->
58+
59+
---
60+
61+
<!-- .slide: data-background-video="https://media.giphy.com/media/13mLwGra9bNEKQ/giphy.mp4" data-background-video-loop="loop" data-background-video-muted -->
62+
63+
---
64+
65+
<!-- .slide: data-background-video="https://media.giphy.com/media/lULrKRTHddgXK/giphy.mp4" data-background-video-loop="loop" data-background-video-muted -->
66+
67+
<div style="position:relative;width:300px;height:100px;background:none;left:800px;">
68+
<img src="https://rawgit.com/mjhea0/presentations/master/docs/front-end-face-off/images/ember-logo.svg" style="background:none;border:none;" />
69+
<img src="https://rawgit.com/mjhea0/presentations/master/docs/front-end-face-off/images/angular-logo.svg" style="background:none;border:none;"/>
70+
<img src="https://rawgit.com/mjhea0/presentations/master/docs/front-end-face-off/images/react-logo.svg" style="background:none;border:none;" />
71+
</div>
72+
73+
---
74+
75+
<!-- .slide: data-background-video="https://media.giphy.com/media/nmuEJfxazCeWY/giphy.mp4" data-background-video-loop="loop" data-background-video-muted -->
76+
77+
---
78+
79+
## We made:
80+
* App
81+
* Component
82+
* model
83+
* view
84+
* controller
85+
* Router
86+
* API
87+
88+
----
89+
90+
## App
91+
* addComponent
92+
* showComponent
93+
* updateView
94+
95+
----
96+
97+
## Component
98+
* name
99+
* model
100+
* view
101+
* controller
102+
103+
----
104+
105+
## Router
106+
* addRoute
107+
* onHashChange
108+
109+
----
110+
111+
## API
112+
* getDogs
113+
* getDog
114+
115+
---
116+
117+
# Conclusion
118+
119+
---
120+
121+
# Should you do this in production?
122+
123+
----
124+
125+
<!-- .slide: data-background-video="https://media.giphy.com/media/xUA7aTM6JBmolQBkdi/giphy.mp4" data-background-video-loop="loop" data-background-video-muted -->
126+
127+
----
128+
129+
# Frameworks Exist For A Reason
130+
131+
---
132+
133+
# Should you do this for fun?
134+
135+
----
136+
137+
<!-- .slide: data-background-video="https://media.giphy.com/media/r1fDuPIcs18d2/giphy.mp4" data-background-video-loop="loop" data-background-video-muted -->
138+
139+
----
140+
141+
### Answer the question:
142+
### If you were to implement a library/framework/API feature from scratch, how would you do it?
143+
144+
---
145+
146+
## Links/Plugs
147+
148+
* This code is here: [https://git.io/vanilla-js](https://git.io/vanilla-js)
149+
* [c.js - A simple MVC framework that no-one should use](https://github.com/w3cj/c.js)
150+
* [August 10th - Develop Denver: An OverVue of Vue.js](https://developdenver.org/talks/72)
151+
* Organizer of the [Vue.js Meetup](https://www.meetup.com/Denver-Vue-js-Meetup/)
152+
* Looking for full talk/lightning talk speakers for August 28th and September 25th
153+
154+
---
155+
156+
<!-- .slide: data-background-video="https://media.giphy.com/media/l3vR4yk0X20KimqJ2/giphy.mp4" data-background-video-loop="loop" data-background-video-muted -->
157+
158+
---

‎app/lib/API.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
class API {
2+
constructor() {
3+
this.API_URL = 'https://barkwire-api.herokuapp.com/dogs';
4+
}
5+
getDogs() {
6+
return fetch(this.API_URL)
7+
.then(res => res.json());
8+
}
9+
getDog(id) {
10+
return fetch(`${this.API_URL}/${id}`)
11+
.then(res => res.json());
12+
}
13+
}

‎app/lib/app.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
class App {
2+
constructor(selector) {
3+
this.appElement = document.querySelector(selector);
4+
this.componentsByName = {};
5+
}
6+
addComponent(component) {
7+
this.componentsByName[component.name] = component;
8+
component.model = this.proxify(component.model);
9+
}
10+
showComponent(name) {
11+
this.currentComponent = this.componentsByName[name];
12+
13+
if(this.currentComponent) {
14+
this.currentComponent.controller(this.currentComponent.model);
15+
}
16+
this.updateView();
17+
}
18+
updateView() {
19+
if(this.currentComponent) {
20+
this.appElement.innerHTML = this.currentComponent.view(this.currentComponent.model);
21+
} else {
22+
this.appElement.innerHTML = '<h3>Not Found</h3>';
23+
}
24+
}
25+
proxify(model) {
26+
const self = this;
27+
return new Proxy(model, {
28+
set(target, property, value) {
29+
console.log('Changing', property, 'from', target[property], 'to', value);
30+
target[property] = value;
31+
self.updateView();
32+
return true;
33+
}
34+
});
35+
}
36+
}

‎app/lib/router.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
class Router {
2+
constructor(app) {
3+
this.app = app;
4+
this.routes = [];
5+
this.hashChange = this.hashChange.bind(this);
6+
7+
window.addEventListener('hashchange', this.hashChange);
8+
window.addEventListener('DOMContentLoaded', this.hashChange);
9+
}
10+
addRoute(name, url) {
11+
this.routes.push({
12+
name,
13+
url
14+
});
15+
}
16+
hashChange() {
17+
const hash = window.location.hash;
18+
const route = this.routes.filter(route => hash.match(new RegExp(route.url)))[0];
19+
20+
if(route) {
21+
this.params = new RegExp(route.url).exec(hash);
22+
this.app.showComponent(route.name);
23+
} else {
24+
this.app.showComponent();
25+
}
26+
}
27+
}

‎app/main.js

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
const app = new App('#app');
2+
const api = new API();
3+
4+
const dogTemplate = (dog) => `
5+
<section class="dog-listing">
6+
<a href="#/dogs/${dog.id}">
7+
<h3 class="name">${dog.name}</h3>
8+
<section>
9+
<figure>
10+
<img src="${dog.imageUrl}" alt="${dog.name}" />
11+
<figcaption>${dog.imageCaption}</figcaption>
12+
</figure>
13+
<p>${dog.description}</p>
14+
</section>
15+
</a>
16+
</section>
17+
`;
18+
19+
app.addComponent({
20+
name: 'dogs',
21+
model: {
22+
dogs: []
23+
},
24+
view(model) {
25+
const dogsHTML = model.dogs.reduce((html, dog) => html + `<li>${dogTemplate(dog)}</li>`, '')
26+
return `
27+
<ul class="dogs">
28+
${dogsHTML}
29+
</ul>
30+
`;
31+
},
32+
controller(model) {
33+
api
34+
.getDogs()
35+
.then(result => {
36+
model.dogs = result.dogs;
37+
});
38+
}
39+
});
40+
41+
app.addComponent({
42+
name: 'dog',
43+
model: {
44+
dog: {}
45+
},
46+
view(model) {
47+
return dogTemplate(model.dog);
48+
},
49+
controller(model) {
50+
api
51+
.getDog(router.params[1])
52+
.then(result => {
53+
model.dog = result.dog;
54+
});
55+
}
56+
});
57+
58+
const router = new Router(app);
59+
router.addRoute('dogs', '^#/dogs$');
60+
router.addRoute('dog', '^#/dogs/([0-9]*)$');

‎index.html

+6-2
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,16 @@
77
</head>
88
<body>
99
<header>
10-
<h1><a href="/">BarkWire</a></h1>
10+
<h1><a href="#/dogs">BarkWire</a></h1>
1111
</header>
12-
<main>
12+
<main id="app">
1313
</main>
1414
<footer>
1515
<small>&copy; Barkwire Inc.</small>
1616
</footer>
17+
<script src="app/lib/API.js" charset="utf-8"></script>
18+
<script src="app/lib/app.js" charset="utf-8"></script>
19+
<script src="app/lib/router.js" charset="utf-8"></script>
20+
<script src="app/main.js" charset="utf-8"></script>
1721
</body>
1822
</html>

0 commit comments

Comments
 (0)