Slide 1
Slide 1 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
Slide 2
Slide 2 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
+
Slide 3
Slide 3 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
+
A L L E N M O O R E | S E N I O R F R O N T E N D E N G I N E E R
Slide 4
Slide 4 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
W H E R E TO F I N D M E
Slide 5
Slide 5 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
W H E R E TO F I N D M E
@creativeallen
https://allenmoore.me
https://github.com/allenmoore
Slide 6
Slide 6 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
Slide 7
Slide 7 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
Slide 8
Slide 8 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
YES, we're hiring!
Slide 9
Slide 9 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
* D I S C L A I M E R S
Slide 10
Slide 10 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
This is not an official endorsement for Vue.js from 10up.
Slide 11
Slide 11 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
This is not an attempt to discredit other MVC Frameworks, such as
React or Angular
Slide 12
Slide 12 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
This is not a declaration to use Vue.js for every project.
Slide 13
Slide 13 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
JAVAS C R I P T F R A M E WO R K FAT I G U E
Slide 14
Slide 14 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
Slide 15
Slide 15 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
Slide 16
Slide 16 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
Slide 17
Slide 17 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
Slide 18
Slide 18 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
Slide 19
Slide 19 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
Slide 20
Slide 20 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
Slide 21
Slide 21 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
Slide 22
Slide 22 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
T H E R I G H T TO O L A N D F I T
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
“Just because you have access to jQuery does not mean that it should be or has to be
used.”
Slide 28
Slide 28 text
– A L L E N M O O R E
“Just because you have access to jQuery does not mean that it should be or has to be
used.”
Slide 29
Slide 29 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
W H AT I S V U E . J S A N D W H Y S H O U L D I C A R E ?
Slide 30
Slide 30 text
“Vue (pronounced /vjuː/, like view) is a progressive framework for building user
interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up
to be incrementally adoptable.”
Slide 31
Slide 31 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
W H Y ?
Slide 32
Slide 32 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
W H Y ?
• Versatility
Slide 33
Slide 33 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
W H Y ?
• Versatility
• Easy on-boarding
Slide 34
Slide 34 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
W H Y ?
• Versatility
• Easy on-boarding
• Vanilla JavaScript
Slide 35
Slide 35 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
W H Y ?
• Versatility
• Easy on-boarding
• Vanilla JavaScript
• Lack of dependency requirements
Slide 36
Slide 36 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
V U E . J S I N T H E WO R D P R E S S A D M I N
Slide 37
Slide 37 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
1
Slide 38
Slide 38 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
1 'Upload an Image',
4 'name' => 'cmm-image-upload',
5 'image_id' => 0,
6 'image_size' => 'thumbnail',
7 'max_uploads' => 50,
8 'type' => 'option',
9 );
10
11 $args = wp_parse_args( $args, $defaults );
12
13 $image_src = wp_get_attachment_image_src( $args['image_id'], $args['image_size'] );
14 $image_src = is_array( $image_src ) ? reset( $image_src ): '';
Slide 39
Slide 39 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
1 $fieldName,
10 'images' => $imageData,
11 'maxUploads' => $args['max_uploads'],
12 ];
13
14 wp_localize_script(
15 'cmmis-admin-scripts',
16 'cmmisImageData',
17 $data
18 );
Slide 40
Slide 40 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
1 import Vue from 'vue';
2
3
4 /**
5 * Instantiate the Vue instance.
6 *
7 * @author Allen Moore
8 * @returns {void}
9 */
10 new Vue( {el: '#app'} );
Slide 41
Slide 41 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
1
2
3
4
5
6
7
8
Slide 42
Slide 42 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
1
2
3
8
4
7
5
6 Slide 43
Slide 43 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
1
2
3
5 ![]()
6
17
7
8
9 Edit Image
10
11
12
13 Delete Image
14
15
16 {{ image.name }}
18 Slide 44
Slide 44 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
1
2
3
4 Add Image
5
6
Slide 45
Slide 45 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
1 /* global cmmisImageData */
2 import './components/icons';
3
4 export default {
5
6 name: 'app',
7
8 data() {
9 return {};
10 },
11
12 methods: {},
13
14 mounted() {}
15 };
Slide 46
Slide 46 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
1 data() {
2 return {
3 field: `${cmmisImageData.fieldName}[]`,
4 images: []
5 }
6 }
Slide 47
Slide 47 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
1 methods: {
2 getImages() {
3 const images = cmmisImageData.images;
4 let image;
5
6 for ( let i = 0, len = images.length; i < len; i++ ) {
7 image = images[i];
8 this.images.push( image );
9 }
10 }
11 }
Slide 48
Slide 48 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
1 methods: {
2 insertImg( frame ) {
3 const selection = frame.state().get( 'selection' ),
4 length = selection.length,
5 images = selection.models;
6 let imgData = {},
7 img,
8 imgEditLink,
9 imgId,
10 imgTitle,
11 imgUrl;
12
13 for ( let i = 0; i < length; i++ ) {
14 img = images[i];
15 imgEditLink = img.changed.editLink;
16 imgId = img.id;
17 imgTitle = img.changed.title;
18 imgUrl = img.changed.sizes.thumbnail.url;
19 imgData = {
20 edit: imgEditLink,
21 id: imgId,
22 name: imgTitle,
23 src: imgUrl
24 };
25 this.images.push( imgData );
26 }
27 }
28 }
Slide 49
Slide 49 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
1 methods: {
2 openModal( event ) {
3 const self = this;
4 let frame;
5
6 if ( event ) {
7 event.preventDefault();
8 }
9 frame = wp.media( {
10 frame: 'post',
11 title: 'Choose an Image',
12 library: {
13 type: 'image'
14 },
15 multiple: true,
16 button: {
17 text: 'Select Image'
18 }
19 } );
20 frame.open();
21 frame.on( 'insert', function() {
22 self.insertImg( frame );
23 } );
24 }
25 }
Slide 50
Slide 50 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
1 methods: {
2 deleteImage( img ) {
3 this.images.splice( this.images.indexOf( img ), 1 );
4 }
5 }
Slide 51
Slide 51 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
1 mounted() {
2 this.getImages();
3 }
Slide 52
Slide 52 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
1 import Vue from 'vue';
2 import svgicon from 'vue-svgicon';
3 import App from './App.vue';
4
5 Vue.use( svgicon, {tagName: 'svgicon'} );
6
7 new Vue( {
8 el: '#app',
9 render: h => h( App )
10 } );
Slide 53
Slide 53 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
V U E . J S A N D T H E WO R D P R E S S R E S T A P I
Slide 54
Slide 54 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
1
Slide 55
Slide 55 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
1 const wpApiUrl = 'https://allenmoore.me/wp-json/wp/v2/posts/?_embed&per_page=5';
2
3 class DisplayPosts extends Vue {
4 constructor() {}
5 }
6
7 new DisplayPosts();
Slide 56
Slide 56 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
1 class DisplayPosts extends Vue {
2 getPosts( res ) {
3 this.posts = JSON.parse( res.responseText );
4
5 return this.posts;
6 }
7 }
Slide 57
Slide 57 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
1 class DisplayPosts extends Vue {
2 getData( res, posts = null ) {
3 const self = this;
4
5 res.open( 'GET', wpApiUrl );
6 res.onload = function() {
7 self.getPosts( res );
8 };
9 res.send();
10 }
11 }
Slide 58
Slide 58 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
1 class DisplayPosts extends Vue {
2 constructor() {
3 const props = {
4 el: '#app',
5 data: {posts: null},
6 created() {
7 this.fetchPosts();
8 },
9 methods: {
10 fetchPosts() {
11 const xhr = new XMLHttpRequest(),
12 self = this;
13
14 this.getData( xhr );
15 }
16 }
17 };
18
19 super( props );
20 this.posts = null;
21 }
22 }
Slide 59
Slide 59 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
1
2
3
4
Slide 60
Slide 60 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
1
2 ![]()
3
4
5
{{ post.title.rendered }}
6 7Slide 61
Slide 61 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017
Q & A
Slide 62
Slide 62 text
Allen Moore • @creativeallen • #wcraleigh • allenmoore.me/wcraleigh-2017