Skip to content

Commit 9ce245a

Browse files
quantuminformationquantuminformation
committed
More documentation and examples.
1 parent e5a787b commit 9ce245a

File tree

6 files changed

+129
-20
lines changed

6 files changed

+129
-20
lines changed

‎README.md

Lines changed: 42 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,51 @@
1-
# Template
1+
# Vanilla TypeScript Components
22

3-
This is a presentation template.
3+
Learning TypeScript by example and practical use cases
44

5-
## Reference
5+
# Practice slow, to learn fast "A sensai"
66

7-
The Spectacle core API is available at [https://github.com/FormidableLabs/spectacle/blob/master/README.markdown](https://github.com/FormidableLabs/spectacle/blob/master/README.markdown).
7+
Strong foundations mean we can go further for longer
88

9-
## Development
9+
# Course Outline
1010

11-
To start up the local server, run `npm start`
11+
To provide a good practical learning outcome Courses are normally booked for 1-3 or 1-5 days
1212

13-
Open a browser and hit [http://localhost:3000](http://localhost:3000), and we are ready to roll
13+
##Day 1
1414

15-
## Building & Deployment
15+
Session 1
16+
Typed JavaScript
1617

17-
Building the dist version of the project is as easy as running `npm run build`
18+
Session 2
19+
TypeScript Playground examples
1820

19-
If you want to deploy the slideshow to gh-pages, run `npm run deploy`
21+
##Day 2
22+
23+
Session 1
24+
TypeScript and webpack
25+
26+
Session 2
27+
A Vanilla TypeScript component boiler plate
28+
29+
##Day 3
30+
31+
Session 1
32+
Publish a TypeScript component to npm and importing into JavaScript and TypeScript projects
33+
34+
35+
Session 2
36+
Making a TypeScript popup and growl like component
37+
38+
##Day 4
39+
40+
Session 1
41+
Making a TypeScript router
42+
43+
Session 2
44+
Making a TypeScript space-invadors game
45+
46+
##Day 5
47+
48+
Session 1
49+
Introduction to Angular 2
50+
Session 2
51+
Making an Angular 2 finance component

‎examples/vanilla-typescript/events/ApplicationEvents.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/**
2+
* Common Application Events
3+
*/
4+
5+
export class ApplicationEvents {
6+
7+
static readonly USER_HAS_LOGGED_IN = "USER_HAS_LOGGED_IN"
8+
static readonly USER_HAS_LOGGED_OUT = "USER_HAS_LOGGED_OUT"
9+
}

‎examples/vanilla-typescript/events/KeyCodes.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// I'm adding to these as I need them) If you need to add feel free to PR!
2+
3+
export let KeyCodes = {
4+
BACKSPACE: 8,
5+
6+
RETURN: 13,
7+
ESC: 27,
8+
SPACE: 32,
9+
10+
LEFT: 37,
11+
UP: 38,
12+
RIGHT: 39,
13+
DOWN: 40,
14+
15+
ZERO: 48,
16+
ONE: 49,
17+
TWO: 50,
18+
19+
a: 65,
20+
b: 66,
21+
F: 70,
22+
k: 75,
23+
m: 77,
24+
25+
WIN_or_CMD:91 //to detect cmd on key up use this, on keydown you can use event.metaKey
26+
}

‎examples/vanilla-typescript/interfaces/IAttachableComponent.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
3+
export interface IAttachableComponent {
4+
attach: ()=>void
5+
detach: ()=>void
6+
}

‎examples/IComponent.ts renamed to ‎examples/vanilla-typescript/interfaces/IComponent.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
export interface IComponent {
23
destroy: ()=>void
34
show: ()=>void

‎presentation/index.js

Lines changed: 45 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -75,13 +75,13 @@ export default class Presentation extends React.Component {
7575

7676
<Slide transition={slideTransition} bgColor="secondary">
7777
<BlockQuote >
78-
<Quote>Same as Vanilla-JavaScript Components with typing</Quote>
78+
<Quote>Same as Vanilla-JavaScript Components with the benifits of strong typing</Quote>
7979
</BlockQuote>
8080
</Slide>
8181
<Slide transition={slideTransition}>
8282

8383

84-
<Heading size={1} lineHeight={1} >Goals</Heading>
84+
<Heading size={1} lineHeight={1} textColor="secondary" >Goals</Heading>
8585

8686

8787

@@ -93,12 +93,19 @@ export default class Presentation extends React.Component {
9393
</Appear>
9494
<Appear fid="3">
9595
<Heading size={2} caps fit>
96-
Minimal abstraction(if any)
96+
Minimal abstraction
9797
</Heading>
9898
</Appear>
9999
<Appear fid="3">
100100
<Heading size={2} caps fit textColor="tertiary">
101-
Communication through custom DOM events </Heading>
101+
Communication through DOM events</Heading>
102+
</Appear>
103+
<Appear fid="3">
104+
<Heading size={2} caps fit>Lightweight component API's</Heading>
105+
</Appear>
106+
<Appear fid="3">
107+
<Heading size={2} caps fit textColor="tertiary">
108+
Flexibility of usage</Heading>
102109
</Appear>
103110
<Appear fid="3">
104111
<Heading size={2} caps fit>Zero learning curve</Heading>
@@ -115,20 +122,48 @@ export default class Presentation extends React.Component {
115122
</Slide>
116123

117124
<Slide transition={slideTransition}>
118-
<Heading size={2}>
119-
Vanilla-typeScript npm package
120-
</Heading>
121-
<h3>Creating a cross framework component from scratch</h3>
125+
<h4>Vanilla-TypeScript npm package</h4>
126+
<h4>Is this a framework?</h4>
127+
<CodePane
128+
lang="typescript"
129+
source={require("raw!../examples/vanilla-typescript/interfaces/IComponent.ts")}
130+
margin="20px auto"
131+
/>
122132
<CodePane
123133
lang="typescript"
124-
source={require("raw!../examples/IComponent.ts")}
134+
source={require("raw!../examples/vanilla-typescript/interfaces/IAttachableComponent.ts")}
125135
margin="20px auto"
126136
/>
127137
<p><a
128138
href="https://github.com/quantumjs/vanilla-typescript">https://github.com/quantumjs/vanilla-typescript</a>
129139
</p>
140+
<h4>Taming the wild west of vanilla-js since 2016</h4>
141+
</Slide>
142+
143+
<Slide transition={slideTransition}>
144+
<Heading size={1} lineHeight={1} textColor="tertiary">
145+
Reusable component template
146+
</Heading>
147+
<h4>Tactics by example</h4>
148+
<Image src={images.ts} margin="40px auto" height="324px"/>
149+
</Slide>
150+
151+
<Slide transition={slideTransition}>
130152
<h4>Is this a framework?</h4>
131-
<p>Nope, this is just to provide some little level of common sense to the wild west of vanillajs.</p>
153+
<CodePane
154+
lang="typescript"
155+
source={require("raw!../examples/vanilla-typescript/interfaces/IComponent.ts")}
156+
margin="20px auto"
157+
/>
158+
<CodePane
159+
lang="typescript"
160+
source={require("raw!../examples/vanilla-typescript/interfaces/IAttachableComponent.ts")}
161+
margin="20px auto"
162+
/>
163+
<p><a
164+
href="https://github.com/quantumjs/vanilla-typescript">https://github.com/quantumjs/vanilla-typescript</a>
165+
</p>
166+
<h4>Taming the wild west of vanilla-js since 2016</h4>
132167
</Slide>
133168

134169

0 commit comments

Comments
 (0)