Frontend sharing

Ming YIN

ming.today/timeline

VUE.JS
Meteor

Es6

VUE.JS

gold.xitu.io/#/tag/Vue.js

vuejs.org

MVC

Model - View - Controller

MVVM

Model - View - ViewModel

<form id="demo">

    <input type="text" v-model="message">
    <p>{{message}}</p>

</form>

var demo = new Vue({
    el: '#demo',
    data: {
        message: 'Hello Vue.js!'
    }
});

<form id="demo">

    <label for="message">{{messageHint}}</label>
    <input id="message" type="text" v-model="message">

</form>

var demo = new Vue({
    el: '#demo',
    data: {
        message: 'Hello Vue.js!'
    },
    computed: {
        messageHint: function() {
            if (this.message) {
                return "Message: " + this.message;
            } else {
                return "Message is empty!";
            }
        }
    }
})

<form id="demo">
    
    <input id="number" type="number" min="0" max="100" v-model="number">
    <p>{{number | truncNumber}}</p>

</form>

var demo = new Vue({
    el: '#demo',
    data: {
        number: 0
    },
    filter: {
        truncNumber: function(number) {
            if (number < 1000) {
                return number;
            } else {
                return number / 1000 + 'K';
            }
        }
    }
})

<form id="demo">
    
    <input type="number" v-model="number" v-on="focus: alertNumber">
    <p>{{number | truncNumber}}</p>

</form>

var demo = new Vue({
    el: '#demo',
    data: {
        number: 0
    },
    methods: {
        alertNumber: () {
            alert(this.message);
        }
    },
    filter: {
        truncNumber: function(number) {
            if (number < 1000) {
                return number;
            } else {
                return number / 1000 + 'K';
            }
        }
    }
})

<form id="demo">
    
    <message>
    <number>

</form>

var demo = new Vue({
    el: '#demo',
    components: {
        message: {
            template: '...',
            data: function() { return {...}; },
            methods: { ... }
        },
        number: {
            ...
        }
    }
})

vue-loader

github.com/vuejs/vue-loader

<style lang="scss">
    body {
        font-size: 16px;
        p {
            margin: 1em 0;
        }
    }
    .fade {
        opacity: 0;
        @include transition(opacity .3s);
        &:hover, &:active {
            opacity: 1;
        }
    }
</style>

<template lang="jade">

form#demo
    p {{text}}
    message
    number

</template>

<script lang="babel">
import message from "./form-components/message"
import number  from "./form-components/number"

export default {
    replace: true,
    components: {
        message: message,
        number: number
    },
    data () {
        return {
            text: 'Hello World!'
        }
    },
    ...
}

</script>

ftandy 的一点点总结

http://ftandy.github.io/blog/2015/09/05/vue/

Meteor

gold.xitu.io/#/tag/Meteor.js

meteor.com

One language everywhere

Live updates

Ultra responsive

Unified package system

Mobile first

@Comments = new Mongo.Collection 'comments'

@Comments.allow
  insert: (userId, comment) ->
    return false
  update: (userId, comment, fields, modifier) ->
    userId is comment.owner and ! _.difference(fields, ['content', 'updated_at']).length
  remove: (userId, comment) ->
    userId is comment.owner

NonEmptyString = Match.Where (x) ->
  check x, String
  x.length isnt 0

Meteor.methods
  createComment: (content, ownerId) ->
    check content, NonEmptyString
    commentId = Random.id()
    timeNow = Date.now()
    Comments.insert
      _id: commentId
      owner: ownerId
      content: content
      created_at: timeNow
      updated_at: timeNow
    commentId
    

# Initiate the comment input content
Meteor.startup () ->
  Session.set 'content', ''
  Session.set 'tempId', Random.id()

# Create a comment
Template.commentInput.events
  'keyup textarea': (event, template) ->
    Session.set 'content', template.$('textarea').val()
  'click button': (event, template) ->
    userId = Meteor.userId()
    ownerId = if userId? then userId else Session.get('tempId')
    lastComment = Comments.findOne {owner: ownerId}, {sort: {created_at: -1}}
    if lastComment? and (Date.now() - lastComment.created_at < 3000)
      alert('You have added too many comments!')
    else
      Meteor.call 'createComment', Session.get('content'), ownerId
      $('.comments').scrollTop 0
    template.$('textarea').val ''
    Session.set 'content', ''

Template.commentInput.creatorName = () ->
  currentUser = Meteor.user()
  if currentUser?
    ", #{displayName(currentUser)}"
  else
    ''

# Show comments
Template.chatRoom.comments = () ->
  Comments.find {}, {sort: {created_at: -1}}

# Show a comment
Template.commentBox.mine = () ->
  id = Meteor.userId()
  id? and @owner is id

Template.commentBox.creatorName = (id) ->
  owner = Meteor.users.findOne id
  if owner? then displayName(owner) else "#{id.slice(0, 2)}····#{id.slice(-5)}"

Template.commentBox.showTime = (time) ->
  new Date(time).toLocaleString()

Template.commentBox.events
  'click .remove': () ->
    Comments.remove @_id
    false
  'keypress .content': (event, template) ->
    $content = $ event.target
    if event.charCode is 13
      content = $.trim $content.text()
      if content.length > 0
        Comments.update @_id,
          $set:
            content: content
            updated_at: Date.now()
        , () =>
          $content.html content
        $content
          .blur()
          .addClass 'animated fadeIn'
          .one 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', () ->
            $content.removeClass 'animated fadeIn'
      else
        $content
          .html @content
          .addClass 'animated shake'
          .one 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', () ->
            $content.removeClass 'animated shake'
        event.preventDefault()

Ecmascript 6

ECMAScript 2015

gold.xitu.io/#/tag/ECMAScript%206

Babel

babeljs.io

将 ES6 的 Code 转为现浏览器可以支持的 JavaScript，且已经各种联合 Gulp, Grunt, Webpack, Browserify 等等工具。

阮一峰

es6.ruanyifeng.com

一个免费的在线文档，介绍了主要的新的属性、性能、接口等。并配有大量的实例。

Promise
generator
module