├── .babelrc ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── .nvmrc ├── .postcssrc.js ├── .stylelintrc ├── .travis.yml ├── LICENSE ├── README.md ├── build ├── assetsPath.js ├── build.js ├── logo.png ├── notifier.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── config ├── default.js ├── development.js ├── index.js └── production.js ├── package.json ├── src ├── css │ ├── _reveal.less │ ├── block │ │ ├── code.less │ │ ├── ecosystem.less │ │ ├── etc.less │ │ ├── user-info.less │ │ └── vue-logo.less │ ├── styles.less │ └── variables.less ├── index.html ├── js │ └── chart │ │ ├── benchmark │ │ ├── append-rows-to-large-table.js │ │ ├── clear-rows.js │ │ ├── create-many-rows.js │ │ ├── create-rows.js │ │ ├── index.js │ │ ├── partial-update.js │ │ ├── remove-row.js │ │ ├── replace-all-rows.js │ │ ├── select-row.js │ │ ├── startup-time.js │ │ └── swap-rows.js │ │ ├── generator-benchmark.js │ │ ├── memory │ │ ├── creating-clearing.js │ │ ├── index.js │ │ ├── ready-memory.js │ │ ├── replace-rows.js │ │ ├── run-memory.js │ │ └── update-eatch.js │ │ └── stars-history.js ├── main.js ├── main.less └── static │ └── images │ ├── MVVM.png │ ├── components.png │ ├── devtool.png │ ├── doc.png │ ├── events-props.png │ ├── lifecycle.png │ ├── nuxt.png │ ├── photo-evan-you.jpeg │ ├── photo-igor-ognichenko.jpg │ ├── reactivity.png │ ├── vuex-shared.png │ └── vuex.png └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | insert_final_newline = true 6 | trim_trailing_whitespace = true 7 | 8 | [*.js] 9 | charset = utf-8 10 | indent_style = space 11 | indent_size = 2 12 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parserOptions: { 4 | parser: 'babel-eslint' 5 | }, 6 | env: { 7 | browser: true, 8 | }, 9 | extends: [ 10 | 'airbnb-base' 11 | ], 12 | plugins: [], 13 | rules: { 14 | 'generator-star-spacing': 'off', 15 | 'padded-blocks': 'off', 16 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 17 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 18 | } 19 | }; 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | src/css/*.css 4 | yarn-error.log 5 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | lts/* 2 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "plugins": { 3 | "postcss-url": {}, 4 | "autoprefixer": {}, 5 | } 6 | }; 7 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-standard" 3 | } 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - "stable" 5 | 6 | install: 7 | - npm install 8 | 9 | script: 10 | - npm run build 11 | - npm run lint 12 | 13 | notifications: 14 | email: false 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Igor Ognichenko 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue.JS presentation 2 | 3 | ## Development Setup 4 | 5 | ``` bash 6 | # install dependencies 7 | npm install 8 | ``` 9 | 10 | 11 | ## Table of Contents 12 | - [About Me](https://robinck.github.io/vue-presentation/#/) 13 | - [Logo](https://robinck.github.io/vue-presentation/#/1) 14 | - [About Evan You](https://robinck.github.io/vue-presentation/#/2) 15 | - [History](https://robinck.github.io/vue-presentation/#/3) 16 | - [Stars History](https://robinck.github.io/vue-presentation/#/4) 17 | - [WEB frameworks benchmark](https://robinck.github.io/vue-presentation/#/5) 18 | - [Swap rows](https://robinck.github.io/vue-presentation/#/5/1) 19 | - [Partial update](https://robinck.github.io/vue-presentation/#/5/2) 20 | - [Remove row](https://robinck.github.io/vue-presentation/#/5/3) 21 | - [Select row](https://robinck.github.io/vue-presentation/#/5/4) 22 | - [Append rows to large table](https://robinck.github.io/vue-presentation/#/5/5) 23 | - [Create rows](https://robinck.github.io/vue-presentation/#/5/6) 24 | - [Replace all rows](https://robinck.github.io/vue-presentation/#/5/7) 25 | - [Create many rows](https://robinck.github.io/vue-presentation/#/5/8) 26 | - [Clear rows](https://robinck.github.io/vue-presentation/#/5/9) 27 | - [Startup time](https://robinck.github.io/vue-presentation/#/5/10) 28 | - [Memory allocation in mbs](https://robinck.github.io/vue-presentation/#/5/11) 29 | - [Ready memory](https://robinck.github.io/vue-presentation/#/5/12) 30 | - [Run memory](https://robinck.github.io/vue-presentation/#/5/13) 31 | - [Update eatch 10th row for 1k rows](https://robinck.github.io/vue-presentation/#/5/14) 32 | - [Replace 1k rows](https://robinck.github.io/vue-presentation/#/5/15) 33 | - [Creating/clearing 1k rows](https://robinck.github.io/vue-presentation/#/5/16) 34 | - [Advantages](https://robinck.github.io/vue-presentation/#/6) 35 | - [Information](https://robinck.github.io/vue-presentation/#/6/1) 36 | - [Very small size](https://robinck.github.io/vue-presentation/#/6/2) 37 | - [Easy to understand and develop applications](https://robinck.github.io/vue-presentation/#/6/3) 38 | - [Simple integration](https://robinck.github.io/vue-presentation/#/6/4) 39 | - [Detailed documentation](https://robinck.github.io/vue-presentation/#/6/5) 40 | - [Flexibility](https://robinck.github.io/vue-presentation/#/6/6) 41 | - [Right to choose](https://robinck.github.io/vue-presentation/#/6/7) 42 | - [Ecosystem](https://robinck.github.io/vue-presentation/#/7) 43 | - [Native app](https://robinck.github.io/vue-presentation/#/8) 44 | - [Server-side rendering](https://robinck.github.io/vue-presentation/#/9) 45 | - [Who is using it?](https://robinck.github.io/vue-presentation/#/10) 46 | - [How it works?](https://robinck.github.io/vue-presentation/#/11) 47 | - [MVVM](https://robinck.github.io/vue-presentation/#/11/1) 48 | - [Components](https://robinck.github.io/vue-presentation/#/11/2) 49 | - [Lifecycle](https://robinck.github.io/vue-presentation/#/11/3) 50 | - [Reactivity](https://robinck.github.io/vue-presentation/#/11/4) 51 | - [Interpolations](https://robinck.github.io/vue-presentation/#/12) 52 | - [Text](https://robinck.github.io/vue-presentation/#/12/1) 53 | - [Raw html](https://robinck.github.io/vue-presentation/#/12/2) 54 | - [Attributes](https://robinck.github.io/vue-presentation/#/12/3) 55 | - [Using javascript expressions](https://robinck.github.io/vue-presentation/#/12/4) 56 | - [Directives](https://robinck.github.io/vue-presentation/#/13) 57 | - [Computed properties and watchers](https://robinck.github.io/vue-presentation/#/14) 58 | - [Watch](https://robinck.github.io/vue-presentation/#/14/1) 59 | - [Computed](https://robinck.github.io/vue-presentation/#/14/2) 60 | - [Computed setter](https://robinck.github.io/vue-presentation/#/14/3) 61 | - [Binding html classes](https://robinck.github.io/vue-presentation/#/15) 62 | - [Conditional rendering](https://robinck.github.io/vue-presentation/#/16) 63 | - [Loops](https://robinck.github.io/vue-presentation/#/17) 64 | - [Method event handlers](https://robinck.github.io/vue-presentation/#/18) 65 | - [Form input bindings](https://robinck.github.io/vue-presentation/#/19) 66 | - [Event & key modifiers](https://robinck.github.io/vue-presentation/#/20) 67 | - [Component structure](https://robinck.github.io/vue-presentation/#/21) 68 | - [Etc...](https://robinck.github.io/vue-presentation/#/22) 69 | - [What is vuex?](https://robinck.github.io/vue-presentation/#/23) 70 | - [What is a "state management pattern"?](https://robinck.github.io/vue-presentation/#/23/1) 71 | - [Shared state](https://robinck.github.io/vue-presentation/#/23/2) 72 | - [Dev tools](https://robinck.github.io/vue-presentation/#/24) 73 | - [Thanks](https://robinck.github.io/vue-presentation/#/24) 74 | -------------------------------------------------------------------------------- /build/assetsPath.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const config = require('../config'); 3 | 4 | module.exports = function(_path) { 5 | return path.posix.join(config.assetsSubDirectory, _path) 6 | }; 7 | -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | process.env.NODE_ENV = 'production'; 2 | 3 | const ora = require('ora'); 4 | const rm = require('rimraf'); 5 | const path = require('path'); 6 | const chalk = require('chalk'); 7 | const webpack = require('webpack'); 8 | const config = require('../config'); 9 | const webpackConfig = require('./webpack.prod.conf'); 10 | 11 | const spinner = ora('building for production...'); 12 | spinner.start(); 13 | 14 | rm(path.join(config.assetsRoot, config.assetsSubDirectory), err => { 15 | if (err) { 16 | throw err; 17 | } 18 | 19 | webpack(webpackConfig, (err, stats) => { 20 | spinner.stop(); 21 | 22 | if (err) { 23 | throw err 24 | } 25 | 26 | process.stdout.write(stats.toString({ 27 | colors: true, 28 | modules: false, 29 | children: false, 30 | chunks: false, 31 | chunkModules: false, 32 | }) + '\n\n'); 33 | 34 | if (stats.hasErrors()) { 35 | console.log(chalk.red(' Build failed with errors.\n')); 36 | process.exit(1) 37 | } 38 | 39 | console.log(chalk.cyan(' Build complete.\n')); 40 | }) 41 | }); 42 | -------------------------------------------------------------------------------- /build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RobinCK/vue-presentation/9a1821c7572bf383a90728fe5b86c2ca988846ce/build/logo.png -------------------------------------------------------------------------------- /build/notifier.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const notifier = require('node-notifier'); 3 | const packageConfig = require('../package'); 4 | 5 | module.exports = () => { 6 | return (severity, errors) => { 7 | if (severity !== 'error') { 8 | return 9 | } 10 | 11 | const error = errors[0]; 12 | const filename = error.file && error.file.split('!').pop(); 13 | 14 | notifier.notify({ 15 | title: packageConfig.name, 16 | message: `${severity}: ${error.name}`, 17 | subtitle: filename || '', 18 | icon: path.join(__dirname, 'logo.png') 19 | }) 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); 3 | const config = require('../config'); 4 | const assetsPath = require('./assetsPath'); 5 | 6 | function resolve (dir) { 7 | return path.join(__dirname, '..', dir) 8 | } 9 | 10 | const createLintingRule = () => ({ 11 | test: /\.(js)$/, 12 | loader: 'eslint-loader', 13 | enforce: 'pre', 14 | include: [resolve('src'), resolve('test')], 15 | options: { 16 | formatter: require('eslint-friendly-formatter'), 17 | emitWarning: !config.showEsLintErrorsInOverlay 18 | } 19 | }); 20 | 21 | module.exports = { 22 | context: path.resolve(__dirname, '../'), 23 | entry: { 24 | app: './src/main.js', 25 | style: './src/main.less' 26 | }, 27 | output: { 28 | path: config.assetsRoot, 29 | filename: '[name].js', 30 | publicPath: config.assetsPublicPath 31 | }, 32 | resolve: { 33 | extensions: ['.js', '.json'], 34 | alias: { 35 | '~': path.relative(__dirname, 'node_modules'), 36 | } 37 | }, 38 | plugins: [ 39 | new ExtractTextPlugin({ 40 | filename: assetsPath('css/[name].[contenthash].css'), 41 | allChunks: true, 42 | }), 43 | ], 44 | module: { 45 | rules: [ 46 | ...(config.useEslint ? [createLintingRule()] : []), 47 | { 48 | test: /\.js$/, 49 | loader: 'babel-loader', 50 | include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] 51 | }, 52 | { 53 | test: /\.css$/, 54 | use: ExtractTextPlugin.extract({ 55 | fallback: 'style-loader', 56 | use:[ 57 | { loader: 'css-loader' }, 58 | { 59 | loader: 'postcss-loader', 60 | options: { 61 | plugins: [ 62 | require('postcss-import')(), 63 | ], 64 | } 65 | }, 66 | ] 67 | }), 68 | }, 69 | { 70 | test: /\.less$/, 71 | use: ExtractTextPlugin.extract({ 72 | fallback: 'style-loader', 73 | use:[ 74 | { loader: 'css-loader' }, 75 | { loader: 'postcss-loader' }, 76 | { loader: 'less-loader' }, 77 | ] 78 | }), 79 | }, 80 | { 81 | test: /\.scss/, 82 | use: ExtractTextPlugin.extract({ 83 | fallback: 'style-loader', 84 | use:[ 85 | { loader: 'css-loader' }, 86 | { loader: 'postcss-loader' }, 87 | { loader: 'sass-loader' }, 88 | ] 89 | }), 90 | }, 91 | { 92 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 93 | loader: 'url-loader', 94 | options: { 95 | limit: 10000, 96 | name: assetsPath('media/[name].[hash:7].[ext]') 97 | } 98 | }, 99 | { 100 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 101 | loader: 'url-loader', 102 | options: { 103 | limit: 10000, 104 | name: assetsPath('fonts/[name].[hash:7].[ext]') 105 | } 106 | } 107 | ] 108 | }, 109 | node: { 110 | setImmediate: false, 111 | dgram: 'empty', 112 | fs: 'empty', 113 | net: 'empty', 114 | tls: 'empty', 115 | child_process: 'empty' 116 | } 117 | }; 118 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const merge = require('webpack-merge'); 3 | const path = require('path'); 4 | const CopyWebpackPlugin = require('copy-webpack-plugin'); 5 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 6 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin'); 7 | const portfinder = require('portfinder'); 8 | 9 | const notifier = require('./notifier'); 10 | const config = require('../config'); 11 | const baseWebpackConfig = require('./webpack.base.conf'); 12 | 13 | const devWebpackConfig = merge(baseWebpackConfig, { 14 | devtool: config.devtool, 15 | 16 | devServer: { 17 | clientLogLevel: 'warning', 18 | historyApiFallback: { 19 | rewrites: [ 20 | { from: /.*/, to: path.posix.join(config.assetsPublicPath, 'index.html') }, 21 | ], 22 | }, 23 | hot: true, 24 | contentBase: false, 25 | compress: true, 26 | host: config.host, 27 | port: config.port, 28 | open: config.autoOpenBrowser, 29 | overlay: config.errorOverlay 30 | ? { warnings: false, errors: true } 31 | : false, 32 | publicPath: config.assetsPublicPath, 33 | proxy: config.proxyTable, 34 | quiet: true, 35 | watchOptions: { 36 | poll: config.poll, 37 | } 38 | }, 39 | plugins: [ 40 | new webpack.DefinePlugin({ 41 | 'process.env': config.NODE_ENV, 42 | }), 43 | new webpack.HotModuleReplacementPlugin(), 44 | new webpack.NamedModulesPlugin(), 45 | new webpack.NoEmitOnErrorsPlugin(), 46 | new HtmlWebpackPlugin({ 47 | filename: 'index.html', 48 | template: 'src/index.html', 49 | inject: true 50 | }), 51 | new CopyWebpackPlugin([ 52 | { 53 | from: path.resolve(__dirname, '../src/static'), 54 | to: config.assetsSubDirectory, 55 | ignore: ['.*'] 56 | } 57 | ]) 58 | ] 59 | }); 60 | 61 | module.exports = new Promise((resolve, reject) => { 62 | portfinder.basePort = config.port; 63 | portfinder.getPort((err, port) => { 64 | if (err) { 65 | reject(err) 66 | } else { 67 | process.env.PORT = port; 68 | devWebpackConfig.devServer.port = port; 69 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ 70 | compilationSuccessInfo: { 71 | messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], 72 | }, 73 | onErrors: config.notifyOnErrors 74 | ? notifier() 75 | : undefined 76 | })); 77 | 78 | resolve(devWebpackConfig); 79 | } 80 | }) 81 | }); 82 | -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const merge = require('webpack-merge'); 4 | const CopyWebpackPlugin = require('copy-webpack-plugin'); 5 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 6 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin'); 7 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); 8 | const CompressionWebpackPlugin = require('compression-webpack-plugin'); 9 | 10 | const baseWebpackConfig = require('./webpack.base.conf'); 11 | const assetsPath = require('./assetsPath'); 12 | const config = require('../config'); 13 | 14 | const webpackConfig = merge(baseWebpackConfig, { 15 | devtool: config.productionSourceMap ? config.devtool : false, 16 | output: { 17 | path: config.assetsRoot, 18 | filename: assetsPath('js/[name].[chunkhash].js'), 19 | chunkFilename: assetsPath('js/[id].[chunkhash].js') 20 | }, 21 | plugins: [ 22 | new webpack.DefinePlugin({ 23 | 'process.env': config.NODE_ENV 24 | }), 25 | new UglifyJsPlugin({ 26 | uglifyOptions: { 27 | compress: { 28 | warnings: false 29 | } 30 | }, 31 | sourceMap: config.productionSourceMap, 32 | parallel: true, 33 | }), 34 | new OptimizeCSSPlugin({ 35 | cssProcessorOptions: config.productionSourceMap 36 | ? { safe: true, map: { inline: false } } 37 | : { safe: true } 38 | }), 39 | new HtmlWebpackPlugin({ 40 | filename: config.index, 41 | template: 'src/index.html', 42 | inject: true, 43 | minify: { 44 | removeComments: true, 45 | collapseWhitespace: true, 46 | removeAttributeQuotes: true, 47 | }, 48 | chunksSortMode: 'dependency' 49 | }), 50 | new webpack.HashedModuleIdsPlugin(), 51 | new webpack.optimize.ModuleConcatenationPlugin(), 52 | new webpack.optimize.CommonsChunkPlugin({ 53 | name: 'vendor', 54 | minChunks (module) { 55 | return ( 56 | module.resource && 57 | /\.js$/.test(module.resource) && 58 | module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0 59 | ) 60 | } 61 | }), 62 | new webpack.optimize.CommonsChunkPlugin({ 63 | name: 'manifest', 64 | minChunks: Infinity 65 | }), 66 | new webpack.optimize.CommonsChunkPlugin({ 67 | name: 'app', 68 | async: 'vendor-async', 69 | children: true, 70 | minChunks: 3 71 | }), 72 | 73 | new CopyWebpackPlugin([ 74 | { 75 | from: path.resolve(__dirname, '../src/static'), 76 | to: config.assetsSubDirectory, 77 | ignore: ['.*'] 78 | } 79 | ]) 80 | ] 81 | }); 82 | 83 | if (config.productionGzip) { 84 | webpackConfig.plugins.push( 85 | new CompressionWebpackPlugin({ 86 | asset: '[path].gz[query]', 87 | algorithm: 'gzip', 88 | test: new RegExp( 89 | '\\.(' + 90 | config.productionGzipExtensions.join('|') + 91 | ')$' 92 | ), 93 | threshold: 10240, 94 | minRatio: 0.8 95 | }) 96 | ) 97 | } 98 | 99 | if (config.bundleAnalyzerReport) { 100 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; 101 | 102 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 103 | } 104 | 105 | module.exports = webpackConfig; 106 | -------------------------------------------------------------------------------- /config/default.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | }; 3 | -------------------------------------------------------------------------------- /config/development.js: -------------------------------------------------------------------------------- 1 | const defaultConfig = require('./default'); 2 | 3 | module.exports = Object.assign(defaultConfig, { 4 | NODE_ENV: '"development"', 5 | assetsSubDirectory: 'static', 6 | assetsPublicPath: '/', 7 | proxyTable: {}, 8 | host: process.env.HOST || 'localhost', 9 | port: !!process.env.PORT ? Number(process.env.PORT) : 8080, 10 | autoOpenBrowser: false, 11 | errorOverlay: true, 12 | notifyOnErrors: true, 13 | poll: false, 14 | useEslint: true, 15 | showEsLintErrorsInOverlay: true, 16 | devtool: 'cheap-module-eval-source-map', 17 | cssSourceMap: true 18 | }); 19 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @type {{ 3 | * NODE_ENV: string, 4 | * assetsSubDirectory: string, 5 | * assetsPublicPath: string, 6 | * proxyTable: {}, 7 | * host: string, 8 | * port: number, 9 | * autoOpenBrowser: boolean, 10 | * errorOverlay: boolean, 11 | * notifyOnErrors: boolean, 12 | * poll: boolean, 13 | * useEslint: boolean, 14 | * showEsLintErrorsInOverlay: boolean, 15 | * devtool: string, 16 | * cssSourceMap: boolean 17 | * }} 18 | */ 19 | module.exports = process.env.NODE_ENV === 'production' 20 | ? require('./production') 21 | : require('./development') 22 | ; 23 | -------------------------------------------------------------------------------- /config/production.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const defaultConfig = require('./default'); 3 | 4 | module.exports = Object.assign(defaultConfig, { 5 | NODE_ENV: '"production"', 6 | index: path.resolve(__dirname, '../dist/index.html'), 7 | assetsRoot: path.resolve(__dirname, '../dist'), 8 | assetsSubDirectory: 'static', 9 | assetsPublicPath: '', 10 | productionSourceMap: true, 11 | devtool: '#source-map', 12 | productionGzip: false, 13 | productionGzipExtensions: ['js', 'css'], 14 | showEsLintErrorsInOverlay: false, 15 | bundleAnalyzerReport: process.env.npm_config_report 16 | }); 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-presentation", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "src/main.js", 6 | "files": [ 7 | "src" 8 | ], 9 | "keywords": [ 10 | "vuejs", 11 | "vue", 12 | "presentation" 13 | ], 14 | "scripts": { 15 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 16 | "start": "npm run dev", 17 | "build": "node build/build.js", 18 | "deploy": "gh-pages -d dist", 19 | "lint": "stylelint src/css/**/*.less -s less --color" 20 | }, 21 | "repository": { 22 | "type": "git", 23 | "url": "git+https://github.com/RobinCK/vue-presentation.git" 24 | }, 25 | "author": "Igor Ognichenko ", 26 | "bugs": { 27 | "url": "https://github.com/RobinCK/vue-presentation/issues" 28 | }, 29 | "engines": { 30 | "node": ">=6.11.5" 31 | }, 32 | "license": "MIT", 33 | "dependencies": { 34 | "flexboxgrid": "^6.3.1", 35 | "highcharts": "^6.1.0", 36 | "highlight.js": "^9.12.0", 37 | "reveal.js": "^3.6.0" 38 | }, 39 | "devDependencies": { 40 | "autoprefixer": "^7.1.2", 41 | "babel-core": "^6.22.1", 42 | "babel-eslint": "^8.2.1", 43 | "babel-loader": "^7.1.1", 44 | "babel-plugin-dynamic-import-node": "^1.2.0", 45 | "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", 46 | "babel-plugin-transform-runtime": "^6.22.0", 47 | "babel-preset-env": "^1.3.2", 48 | "babel-preset-stage-2": "^6.22.0", 49 | "babel-register": "^6.22.0", 50 | "compression-webpack-plugin": "^1.1.11", 51 | "copy-webpack-plugin": "^4.0.1", 52 | "css-loader": "^0.28.0", 53 | "eslint": "^4.15.0", 54 | "eslint-config-airbnb-base": "^12.1.0", 55 | "eslint-friendly-formatter": "^3.0.0", 56 | "eslint-loader": "^1.7.1", 57 | "eslint-plugin-import": "^2.7.0", 58 | "eslint-plugin-node": "^5.2.0", 59 | "eslint-plugin-promise": "^3.4.0", 60 | "eslint-plugin-standard": "^3.0.1", 61 | "extract-text-webpack-plugin": "^3.0.0", 62 | "file-loader": "^1.1.4", 63 | "friendly-errors-webpack-plugin": "^1.6.1", 64 | "gh-pages": "^1.1.0", 65 | "html-webpack-plugin": "^2.30.1", 66 | "less": "^3.0.1", 67 | "less-loader": "^4.1.0", 68 | "node-notifier": "^5.1.2", 69 | "optimize-css-assets-webpack-plugin": "^3.2.0", 70 | "ora": "^2.0.0", 71 | "portfinder": "^1.0.13", 72 | "postcss-import": "^11.0.0", 73 | "postcss-loader": "^2.0.8", 74 | "postcss-url": "^7.2.1", 75 | "sass-loader": "^7.0.1", 76 | "style-loader": "^0.21.0", 77 | "stylelint": "^9.2.0", 78 | "stylelint-config-standard": "^18.2.0", 79 | "uglifyjs-webpack-plugin": "^1.1.1", 80 | "url-loader": "^0.5.8", 81 | "webpack": "^3.6.0", 82 | "webpack-bundle-analyzer": "^2.9.0", 83 | "webpack-dev-server": "^2.9.1", 84 | "webpack-merge": "^4.1.0" 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /src/css/_reveal.less: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | 3 | section.has-light-background { 4 | h1, 5 | h2, 6 | h3, 7 | h4, 8 | h5, 9 | h6 { 10 | color: @dark-background; 11 | } 12 | } 13 | 14 | body { 15 | background: @dark-background; 16 | font-family: @font-family; 17 | } 18 | 19 | .reveal { 20 | h1, 21 | h2, 22 | h3, 23 | h4, 24 | h5, 25 | h6 { 26 | margin: 0 0 20px 0; 27 | color: @header-color; 28 | line-height: 1.2; 29 | letter-spacing: normal; 30 | text-shadow: none; 31 | word-wrap: break-word; 32 | } 33 | 34 | .controls { 35 | color: @controls-color; 36 | } 37 | 38 | .progress { 39 | background: rgba(0, 0, 0, 0.2); 40 | color: @progress-color; 41 | } 42 | 43 | .progress span { 44 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 45 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 46 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 47 | } 48 | 49 | section { 50 | img { 51 | box-shadow: none; 52 | border: none; 53 | background: none; 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/css/block/code.less: -------------------------------------------------------------------------------- 1 | .code { 2 | box-shadow: none; 3 | } 4 | -------------------------------------------------------------------------------- /src/css/block/ecosystem.less: -------------------------------------------------------------------------------- 1 | .ecosystem { 2 | font-size: 0.7em; 3 | 4 | &__link { 5 | color: #fff; 6 | } 7 | 8 | td { 9 | white-space: nowrap; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/css/block/etc.less: -------------------------------------------------------------------------------- 1 | .etc { 2 | &__link { 3 | color: #ffffff; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/css/block/user-info.less: -------------------------------------------------------------------------------- 1 | @import "../variables"; 2 | 3 | .user-info { 4 | &__photo { 5 | box-shadow: none; 6 | border: @photo-border-width @photo-border-style @photo-border-color; 7 | max-width: @photo-width; 8 | border-radius: @photo-border-radius; 9 | } 10 | 11 | &__name { 12 | font-weight: bold; 13 | font-size: 1em; 14 | } 15 | 16 | &__position { 17 | font-size: 0.7em; 18 | font-weight: 200; 19 | 20 | a { 21 | color: @link-color; 22 | } 23 | } 24 | 25 | &__social { 26 | margin-top: 50px; 27 | font-size: 0.4em; 28 | 29 | a { 30 | color: @link-color; 31 | padding: 0 10px; 32 | 33 | &:hover { 34 | color: @link-color-hover; 35 | } 36 | } 37 | } 38 | } 39 | 40 | -------------------------------------------------------------------------------- /src/css/block/vue-logo.less: -------------------------------------------------------------------------------- 1 | .vue-logo { 2 | &__svg { 3 | opacity: 0; 4 | transition: opacity 1s 1s; 5 | } 6 | 7 | &__title { 8 | opacity: 0; 9 | transition: opacity 1s 1.3s; 10 | } 11 | } 12 | 13 | section.present { 14 | .vue-logo { 15 | &__svg { 16 | opacity: 1; 17 | } 18 | 19 | &__title { 20 | opacity: 1; 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/css/styles.less: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "_reveal"; 3 | 4 | .reveal { 5 | @import "block/user-info"; 6 | @import "block/vue-logo"; 7 | @import "block/code"; 8 | @import "block/ecosystem"; 9 | @import "block/etc"; 10 | } 11 | -------------------------------------------------------------------------------- /src/css/variables.less: -------------------------------------------------------------------------------- 1 | @photo-width: 200px; 2 | @photo-border-radius: 50%; 3 | @photo-border-width: 5px; 4 | @photo-border-color: #fff; 5 | @photo-border-style: solid; 6 | 7 | @light-background: #fff; 8 | @dark-background: #42b883; 9 | 10 | @header-color: #fff; 11 | 12 | @font-family: "Source Sans Pro", Helvetica, sans-serif; 13 | 14 | @controls-color: #37485e; 15 | @progress-color: #37485e; 16 | @link-color: #37485e; 17 | @link-color-hover: #fff; 18 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue Presentation 8 | 9 | 10 |
11 |
12 |
13 | 25 |
26 |
27 | 38 |
39 |
40 | 54 |
55 |
56 |
57 |

History

58 |
    59 |
  • Started in late 2013
    • 60 |
  • First release Feb. 2014 (v0.6)
    • 61 |
  • v1.0.0 Evangelion Oct. 2015
    • 62 |
  • Latest release v2.5.16
    • 63 |
64 |
65 |
66 |
67 |

Stars

68 |
69 |
70 |
71 |
72 |

Web Frameworks Benchmark

73 |

Round 7

74 | www.stefankrause.net 75 |
76 |
77 |

Swap Rows

78 |
Time to swap 2 rows on a 1K table. (with 5 warmup iterations).
79 |
80 |
81 |
82 |

Partial Update

83 |
Time to update the text of every 10th row (with 5 warmup iterations) for a table with 10k rows.
84 |
85 |
86 |
87 |

Remove Row

88 |
Duration to remove a row. (with 5 warmup iterations).
89 |
90 |
91 |
92 |

Select Row

93 |
Duration to highlight a row in response to a click on the row. (with 5 warmup iterations).
94 |
95 |
96 |
97 |

Append Rows To Large Table

98 |
Duration for adding 1000 rows on a table of 10,000 rows.
99 |
100 |
101 |
102 |

Create Rows

103 |
Duration for creating 1000 rows after the page loaded.
104 |
105 |
106 |
107 |

Replace All Rows

108 |
Duration for updating all 1000 rows of the table (with 5 warmup iterations).
109 |
110 |
111 |
112 |

Create Many Rows

113 |
Duration to create 10,000 rows
114 |
115 |
116 |
117 |

Clear Rows

118 |
Duration to clear the table filled with 10.000 rows.
119 |
120 |
121 |
122 |

Startup Time

123 |
Time for loading, parsing and starting up
124 |
125 |
126 |
127 |

Memory allocation in MBs

128 |
129 |
130 |

Ready Memory

131 |
Memory usage after page load
132 |
133 |
134 |
135 |

Run Memory

136 |
Memory usage after adding 1000 rows
137 |
138 |
139 |
140 |

Update Eatch 10th Row for 1k Rows (5 cycles)

141 |
Memory usage after clicking update every 10th row 5 times
142 |
143 |
144 |
145 |

Replace 1k Rows (5 cycles)

146 |
Memory usage after clicking create 1000 rows 5 times
147 |
148 |
149 |
150 |

Creating/Clearing 1k rows (5 cycles)

151 |
Memory usage after creating and clearing 1000 rows 5 times
152 |
153 |
154 |
155 |
156 |
157 |

Advantages

158 |
    159 |
  • Very Small Size
    • 160 |
  • Easy to Understand
    and Develop Applications
    • 161 |
  • Simple Integration
    • 162 |
  • Detailed Documentation
    • 163 |
  • Flexibility
    • 164 |
  • Right to choose
    • 165 |
166 |
167 |
168 |

Information

169 |
    170 |
  • Progressive framework
    • 171 |
  • Component oriented
    • 172 |
  • Mix the best of React and Angular
    • 173 |
174 |
175 |
176 |

Very Small Size

177 |
jsize react + react-dom angular vue
178 |
179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 |
NameSize
React + react-dom34.4 kB (gzipped)
Angular62.2 kB (gzipped)
Vue.js23.8 kB (gzipped)
jquery31.1 kB (gzipped)
201 |
202 |
203 |

Easy to Understand and Develop Applications

204 | 

205 | <template>
206 |     <div class="example">{{ msg }}</div>
207 | </template>
208 | 
209 | <script>
210 |     export default {
211 |         data () {
212 |             return {
213 |                 msg: 'Hello world!'
214 |             }
215 |         }
216 |     }
217 | </script>
218 |
219 |
220 |
221 |

Simple Integration

222 |
    223 |
  • tag script (Vue.js runtime)
    • 224 |
  • webpack
    • 225 |
  • web components
    • 226 |
  • browserify
    • 227 |
  • requirejs
    • 228 |
229 |
230 |
231 |

Detailed Documentation

232 | 233 |
234 |
235 |

Flexibility

236 |
    237 |
  • Write your template in an HTML file
    • 238 |
  • Write your template in a string in a Javascript file
    • 239 |
  • Use JSX in a Javascript file
    • 240 |
  • Make your template in pure Javascript using virtual nodes
    • 241 |
242 |

243 | This flexibility makes it easy to switch to Vue because React developers, 244 | Angular developers, or developers new to JS frameworks would all find Vue’s design familiar. 245 |

246 |
247 |
248 |

Right to choose

249 |
    250 |
  • 251 | Template 252 |
      253 |
    • html binding
      • 254 |
    • jsx
      • 255 |
    • jade
      • 256 |
    257 |
    • 258 | 259 |
  • 260 | Component class 261 |
      262 |
    • es5
      • 263 |
    • es6 / es7
      • 264 |
    • es6 + flow
      • 265 |
    • TypeScript
      • 266 |
    267 |
    • 268 |
269 |
270 |
271 |
272 |

Ecosystem

273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 |
ProjectDescription
vue-routerSingle-page application routing
vuexLarge-scale state management
vue-cliProject scaffolding
vue-loaderSingle File Component (*.vue file) loader for webpack
vue-server-rendererServer-side rendering support
vue-class-componentTypeScript decorator for a class-based API
vue-rxRxJS integration
vue-devtoolsBrowser DevTools extension
311 |
312 |
313 |

Native app

314 |
    315 |
  • NativeScript with Vue.js
    • 316 |
  • Weex - Mobile cross-platform UIs
    • 317 |
318 |
319 |
320 |

Server-side Rendering (SSR)

321 | 322 |
323 |
324 |

Who is using it?

325 |
    326 |
  • GitLab
    • 327 |
  • NativeScript
    • 328 |
  • Weex
    • 329 |
  • Baidu
    • 330 |
331 |
332 |
333 |
334 |

How it works?

335 |
336 |
337 | 338 |
339 |
340 |

Components

341 | 342 |
343 |
344 |

Lifecycle

345 | 346 |
347 |
348 |

Reactivity

349 | 350 |
351 |
352 |
353 |
354 |

Interpolations

355 |
356 |
357 |

Text

358 | 

359 | <span>Message: {{ msg }}</span>
360 | <span v-once>This will never change: {{ msg }}</span>
361 |
362 |
363 |
364 |

Raw HTML

365 | 

366 | <p>Using mustaches: {{ rawHtml }}</p>
367 | <p>Using v-html directive: <span v-html="rawHtml"></span></p>
368 |
369 |
370 |
371 |

Attributes

372 | 

373 | <div v-bind:id="dynamicId"></div>
374 | <button v-bind:disabled="isButtonDisabled">Button</button>
375 |
376 |
377 |
378 |

Using JavaScript Expressions

379 | 

380 | {{ number + 1 }}
381 | {{ ok ? 'YES' : 'NO' }}
382 | {{ message.split('').reverse().join('') }}
383 | <div v-bind:id="'list-' + id"></div>
384 |
385 |
386 |
387 |
388 |

Directives

389 |
390 |
391 |
v-bind
392 | 

393 | <!-- full syntax -->
394 | <a v-bind:href="url"></a>
395 | <!-- shorthand -->
396 | <a :href="url"></a>
397 |
398 |
399 |
400 |
v-on
401 | 

402 | <!-- full syntax -->
403 | <a v-on:click="doMethod"></a>
404 | <!-- shorthand -->
405 | <a @click="doMethod"></a>
406 |
407 |
408 |
409 |
Modifiers
410 | 

411 | <form v-on:submit.prevent="onSubmit"> ... </form>
412 |
413 |
414 |
415 |
416 |

Computed Properties and Watchers

417 |
418 |
419 |

Watch

420 | 

421 | var vm = new Vue({
422 |   el: '#demo',
423 |   data: {
424 |     firstName: 'Foo',
425 |     lastName: 'Bar',
426 |     fullName: 'Foo Bar'
427 |   },
428 |   watch: {
429 |     firstName: function (val) {
430 |       this.fullName = val + ' ' + this.lastName
431 |     },
432 |     lastName: function (val) {
433 |       this.fullName = this.firstName + ' ' + val
434 |     }
435 |   }
436 | })
437 |
438 |
439 |
440 |

Computed

441 | 

442 | <div id="demo">{{ fullName }}</div>
443 |
444 | 

445 | var vm = new Vue({
446 |   el: '#demo',
447 |   data: {
448 |     firstName: 'Foo',
449 |     lastName: 'Bar'
450 |   },
451 |   computed: {
452 |     fullName: function () {
453 |       return this.firstName + ' ' + this.lastName
454 |     }
455 |   }
456 | })
457 |
458 |
459 |
460 |

Computed Setter

461 | 

462 | //...
463 | computed: {
464 |   fullName: {
465 |     // getter
466 |     get: function () {
467 |       return this.firstName + ' ' + this.lastName
468 |     },
469 |     // setter
470 |     set: function (newValue) {
471 |       var names = newValue.split(' ')
472 |       this.firstName = names[0]
473 |       this.lastName = names[names.length - 1]
474 |     }
475 |   }
476 | }
477 | //...
478 |
479 |
480 |
481 |
482 |

Binding HTML Classes

483 |
484 |
485 | 

486 | <div :class="{
487 |   'active': isActive,
488 |   'text-danger': HasError
489 | }">
490 | </div>
491 |
492 |
493 |
494 | 

495 | //...
496 | data: {
497 |   isActive: true,
498 |   hasError: false
499 | }
500 |
501 |
502 |
503 |
504 |
505 |

Conditional Rendering

506 | 

507 | <div v-if="type === 'A'">A</div>
508 | <div v-else-if="type === 'B'">B</div>
509 | <div v-else-if="type === 'C'">C</div>
510 | <div v-else>Not A/B/C</div>
511 |
512 |
513 |
514 |

Loops

515 | 

516 | <ul id="example-1">
517 |   <li v-for="item in items">{{ item.message }}</li>
518 | </ul>
519 |
520 | 521 | 

522 | var example1 = new Vue({
523 |   el: '#example-1',
524 |   data: {
525 |     items: [
526 |       { message: 'Foo' },
527 |       { message: 'Bar' }
528 |     ]
529 |   }
530 | })
531 |
532 |
533 |
534 |

Method Event Handlers

535 | 

536 | <div id="example-2">
537 |   <button v-on:click="greet">Greet</button>
538 | </div>
539 |
540 | 541 | 

542 | var example2 = new Vue({
543 |   el: '#example-2',
544 |   data: {
545 |     name: 'Vue.js'
546 |   },
547 |   methods: {
548 |     greet: function (event) {
549 |       // `this` inside methods points to the Vue instance
550 |     }
551 |   }
552 | })
553 |
554 |
555 |
556 |

Form Input Bindings

557 | 

558 | <input v-model="message" placeholder="edit me">
559 | <p>Message is: {{ message }}</p>
560 |
561 |
562 |
563 |

Event & Key Modifiers

564 | 

565 | <!-- the click event's propagation will be stopped -->
566 | <a @click.stop="oThis"></a>
567 | <!-- the submit event will no longer reload the page -->
568 | <form @submit.prevent="onSubmit"></form>
569 | <!-- modifiers can be chained -->
570 | <a @click.stop.prevent="doThat"></a>
571 | <!-- also available .tab, .delete, .esc, .space, ...-->
572 | <input @keyup.enter="submit">
573 |
574 |
575 |
576 |

Component structure

577 | 

578 | export default {
579 |     name: 'RangeSlider',
580 |     mixins: [], // share common functionality with component mixins
581 |     extends: {}, // compose new components
582 |     props: {}, // component properties/variables
583 |     data() {}, // variables
584 |     computed: {},
585 |     components: {}, // when component uses other components
586 |     watch: {}, // watch wariables
587 |     methods: {}, // methods
588 |     // component Lifecycle hooks
589 |     beforeCreate() {},
590 |     created() {},
591 |     beforeMount() {},
592 |     mounted() {},
593 |     beforeUpdate() {},
594 |     updated() {},
595 |     activated() {},
596 |     deactivated() {},
597 |     beforeDestroy() {},
598 |     destroyed() {},
599 |     errorCaptured() {},
600 | };
601 |
602 |
603 |
604 |

Etc...

605 | https://vuejs.org/v2/guide/ 606 |
607 |
608 |
609 |

What is Vuex?

610 |
611 |
612 |

What is a "State Management Pattern"?

613 | 614 |
615 |
616 |

Shared state

617 | 618 |
619 |
620 |
621 |

Dev tools

622 | 623 |
624 |
625 |

Thanks

626 |
627 |
628 |
629 | 630 | 631 | 632 | -------------------------------------------------------------------------------- /src/js/chart/benchmark/append-rows-to-large-table.js: -------------------------------------------------------------------------------- 1 | import generateChart from '../generator-benchmark'; 2 | 3 | generateChart( 4 | 'append-rows-to-large-table-chart-container', 5 | { 6 | react: 271.8, 7 | angular: 257.6, 8 | vue: 338.4, 9 | }, 10 | ); 11 | -------------------------------------------------------------------------------- /src/js/chart/benchmark/clear-rows.js: -------------------------------------------------------------------------------- 1 | import generateChart from '../generator-benchmark'; 2 | 3 | generateChart( 4 | 'clear-rows-chart-container', 5 | { 6 | react: 224.4, 7 | angular: 360.3, 8 | vue: 240.9, 9 | }, 10 | ); 11 | -------------------------------------------------------------------------------- /src/js/chart/benchmark/create-many-rows.js: -------------------------------------------------------------------------------- 1 | import generateChart from '../generator-benchmark'; 2 | 3 | generateChart( 4 | 'create-many-rows-chart-container', 5 | { 6 | react: 2033.7, 7 | angular: 1682.0, 8 | vue: 1521.4, 9 | }, 10 | ); 11 | -------------------------------------------------------------------------------- /src/js/chart/benchmark/create-rows.js: -------------------------------------------------------------------------------- 1 | import generateChart from '../generator-benchmark'; 2 | 3 | generateChart( 4 | 'create-rows-chart-container', 5 | { 6 | react: 187.6, 7 | angular: 185.7, 8 | vue: 169.2, 9 | }, 10 | ); 11 | -------------------------------------------------------------------------------- /src/js/chart/benchmark/index.js: -------------------------------------------------------------------------------- 1 | import './append-rows-to-large-table'; 2 | import './clear-rows'; 3 | import './create-many-rows'; 4 | import './create-rows'; 5 | import './partial-update'; 6 | import './remove-row'; 7 | import './replace-all-rows'; 8 | import './select-row'; 9 | import './startup-time'; 10 | import './swap-rows'; 11 | -------------------------------------------------------------------------------- /src/js/chart/benchmark/partial-update.js: -------------------------------------------------------------------------------- 1 | import generateChart from '../generator-benchmark'; 2 | 3 | generateChart( 4 | 'partial-update-chart-container', 5 | { 6 | react: 93.6, 7 | angular: 73.5, 8 | vue: 168.1, 9 | }, 10 | ); 11 | -------------------------------------------------------------------------------- /src/js/chart/benchmark/remove-row.js: -------------------------------------------------------------------------------- 1 | import generateChart from '../generator-benchmark'; 2 | 3 | generateChart( 4 | 'remove-row-chart-container', 5 | { 6 | react: 51.5, 7 | angular: 46.1, 8 | vue: 52.5, 9 | }, 10 | ); 11 | -------------------------------------------------------------------------------- /src/js/chart/benchmark/replace-all-rows.js: -------------------------------------------------------------------------------- 1 | import generateChart from '../generator-benchmark'; 2 | 3 | generateChart( 4 | 'replace-all-rows-chart-container', 5 | { 6 | react: 165.2, 7 | angular: 179.3, 8 | vue: 161.8, 9 | }, 10 | ); 11 | -------------------------------------------------------------------------------- /src/js/chart/benchmark/select-row.js: -------------------------------------------------------------------------------- 1 | import generateChart from '../generator-benchmark'; 2 | 3 | generateChart( 4 | 'select-row-chart-container', 5 | { 6 | react: 12.4, 7 | angular: 7.6, 8 | vue: 9.8, 9 | }, 10 | ); 11 | -------------------------------------------------------------------------------- /src/js/chart/benchmark/startup-time.js: -------------------------------------------------------------------------------- 1 | import generateChart from '../generator-benchmark'; 2 | 3 | generateChart( 4 | 'startup-time-chart-container', 5 | { 6 | react: 49.4, 7 | angular: 88.8, 8 | vue: 48.4, 9 | }, 10 | ); 11 | -------------------------------------------------------------------------------- /src/js/chart/benchmark/swap-rows.js: -------------------------------------------------------------------------------- 1 | import generateChart from '../generator-benchmark'; 2 | 3 | generateChart( 4 | 'swap-rows-chart-container', 5 | { 6 | react: 19.6, 7 | angular: 20.1, 8 | vue: 21.8, 9 | }, 10 | ); 11 | -------------------------------------------------------------------------------- /src/js/chart/generator-benchmark.js: -------------------------------------------------------------------------------- 1 | import Highcharts from 'highcharts/highcharts'; 2 | 3 | export default function generateChart(id, { react, angular, vue }) { 4 | Highcharts.chart(id, { 5 | boost: { 6 | allowForce: true, 7 | debug: { 8 | showSkipSummary: true, 9 | }, 10 | }, 11 | chart: { 12 | type: 'column', 13 | width: 900, 14 | }, 15 | title: { 16 | text: '', 17 | }, 18 | xAxis: { 19 | type: 'category', 20 | }, 21 | yAxis: { 22 | title: { 23 | text: '', 24 | }, 25 | }, 26 | legend: { 27 | enabled: false, 28 | }, 29 | plotOptions: { 30 | series: { 31 | borderWidth: 0, 32 | dataLabels: { 33 | enabled: true, 34 | format: '{point.y:.1f}', 35 | }, 36 | }, 37 | }, 38 | series: [ 39 | { 40 | name: 'Frameworks', 41 | colorByPoint: true, 42 | data: [ 43 | { 44 | name: 'React', 45 | color: '#60dbfb', 46 | y: react, 47 | }, 48 | { 49 | name: 'Angular', 50 | color: '#de0032', 51 | y: angular, 52 | }, 53 | { 54 | name: 'Vue.JS', 55 | y: vue, 56 | color: '#41b882', 57 | }, 58 | ], 59 | }, 60 | ], 61 | }); 62 | } 63 | -------------------------------------------------------------------------------- /src/js/chart/memory/creating-clearing.js: -------------------------------------------------------------------------------- 1 | import generateChart from '../generator-benchmark'; 2 | 3 | generateChart( 4 | 'creating-clearing-chart-container', 5 | { 6 | react: 4.7, 7 | angular: 7.1, 8 | vue: 3.8, 9 | }, 10 | ); 11 | -------------------------------------------------------------------------------- /src/js/chart/memory/index.js: -------------------------------------------------------------------------------- 1 | import './creating-clearing'; 2 | import './ready-memory'; 3 | import './replace-rows'; 4 | import './run-memory'; 5 | import './update-eatch'; 6 | -------------------------------------------------------------------------------- /src/js/chart/memory/ready-memory.js: -------------------------------------------------------------------------------- 1 | import generateChart from '../generator-benchmark'; 2 | 3 | generateChart( 4 | 'ready-memory-chart-container', 5 | { 6 | react: 3.7, 7 | angular: 6.7, 8 | vue: 3.6, 9 | }, 10 | ); 11 | -------------------------------------------------------------------------------- /src/js/chart/memory/replace-rows.js: -------------------------------------------------------------------------------- 1 | import generateChart from '../generator-benchmark'; 2 | 3 | generateChart( 4 | 'replace-rows-chart-container', 5 | { 6 | react: 9.0, 7 | angular: 10.8, 8 | vue: 7.3, 9 | }, 10 | ); 11 | -------------------------------------------------------------------------------- /src/js/chart/memory/run-memory.js: -------------------------------------------------------------------------------- 1 | import generateChart from '../generator-benchmark'; 2 | 3 | generateChart( 4 | 'run-memory-chart-container', 5 | { 6 | react: 7.6, 7 | angular: 10.5, 8 | vue: 7.2, 9 | }, 10 | ); 11 | -------------------------------------------------------------------------------- /src/js/chart/memory/update-eatch.js: -------------------------------------------------------------------------------- 1 | import generateChart from '../generator-benchmark'; 2 | 3 | generateChart( 4 | 'update-eatch-chart-container', 5 | { 6 | react: 8.5, 7 | angular: 10.6, 8 | vue: 7.3, 9 | }, 10 | ); 11 | -------------------------------------------------------------------------------- /src/js/chart/stars-history.js: -------------------------------------------------------------------------------- 1 | import Highcharts from 'highcharts/highcharts'; 2 | 3 | Highcharts.chart('star-chart-container', { 4 | chart: { 5 | type: 'spline', 6 | width: 900, 7 | backgroundColor: null, 8 | }, 9 | title: { 10 | text: '', 11 | }, 12 | xAxis: { 13 | type: 'datetime', 14 | title: { 15 | text: 'Date', 16 | }, 17 | }, 18 | yAxis: { 19 | title: { 20 | text: 'Stars', 21 | }, 22 | min: 2000, 23 | }, 24 | plotOptions: { 25 | spline: { 26 | lineWidth: 2, 27 | states: { 28 | hover: { 29 | lineWidth: 2, 30 | }, 31 | }, 32 | marker: { 33 | enabled: false, 34 | }, 35 | }, 36 | }, 37 | series: [ 38 | { 39 | name: 'react', 40 | color: '#60dbfb', 41 | data: [ 42 | [Date.UTC(2013, 10, 19), 2610], 43 | [Date.UTC(2014, 3, 24), 5280], 44 | [Date.UTC(2014, 8, 1), 7950], 45 | [Date.UTC(2014, 11, 1), 10620], 46 | [Date.UTC(2015, 1, 1), 13290], 47 | [Date.UTC(2015, 2, 3), 15960], 48 | [Date.UTC(2015, 3, 13), 18630], 49 | [Date.UTC(2015, 5, 3), 21270], 50 | [Date.UTC(2015, 7, 2), 23940], 51 | [Date.UTC(2015, 8, 27), 26610], 52 | [Date.UTC(2015, 10, 16), 29280], 53 | [Date.UTC(2016, 0, 5), 31950], 54 | [Date.UTC(2016, 1, 24), 34620], 55 | [Date.UTC(2016, 3, 5), 37290], 56 | [Date.UTC(2016, 4, 20), 39960], 57 | [Date.UTC(2018, 3, 22), 94139], 58 | [Date.UTC(2018, 5, 18), 102664], 59 | [Date.UTC(2018, 6, 27), 107351], 60 | ], 61 | }, 62 | { 63 | name: 'angular', 64 | color: '#de0032', 65 | data: [ 66 | [Date.UTC(2015, 3, 22), 2280], 67 | [Date.UTC(2015, 8, 11), 4620], 68 | [Date.UTC(2015, 11, 29), 6960], 69 | [Date.UTC(2016, 2, 28), 9330], 70 | [Date.UTC(2016, 5, 9), 11670], 71 | [Date.UTC(2016, 7, 23), 14010], 72 | [Date.UTC(2016, 9, 20), 16350], 73 | [Date.UTC(2017, 0, 15), 18690], 74 | [Date.UTC(2017, 2, 23), 21030], 75 | [Date.UTC(2017, 4, 24), 23370], 76 | [Date.UTC(2017, 7, 3), 25710], 77 | [Date.UTC(2017, 9, 15), 28080], 78 | [Date.UTC(2017, 11, 11), 30420], 79 | [Date.UTC(2018, 1, 13), 32760], 80 | [Date.UTC(2018, 3, 22), 35354], 81 | [Date.UTC(2018, 5, 18), 37364], 82 | [Date.UTC(2018, 6, 27), 38879], 83 | ], 84 | }, 85 | { 86 | name: 'Vue.JS', 87 | color: '#41b882', 88 | data: [ 89 | [Date.UTC(2014, 11, 1), 2610], 90 | [Date.UTC(2015, 7, 1), 5280], 91 | [Date.UTC(2015, 8, 27), 7950], 92 | [Date.UTC(2016, 0, 5), 10620], 93 | [Date.UTC(2016, 1, 24), 13290], 94 | [Date.UTC(2016, 3, 5), 15960], 95 | [Date.UTC(2016, 4, 19), 18630], 96 | [Date.UTC(2016, 6, 15), 21270], 97 | [Date.UTC(2016, 7, 25), 23940], 98 | [Date.UTC(2016, 8, 26), 26610], 99 | [Date.UTC(2016, 9, 21), 29280], 100 | [Date.UTC(2016, 10, 13), 31950], 101 | [Date.UTC(2016, 11, 12), 34620], 102 | [Date.UTC(2017, 0, 9), 37290], 103 | [Date.UTC(2017, 1, 6), 39960], 104 | [Date.UTC(2018, 3, 22), 91782], 105 | [Date.UTC(2018, 5, 18), 102672], 106 | [Date.UTC(2018, 6, 27), 108834], 107 | ], 108 | }, 109 | ], 110 | }); 111 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import reveal from 'reveal.js'; 2 | import highlight from 'highlight.js'; 3 | import './js/chart/stars-history'; 4 | import './js/chart/benchmark'; 5 | import './js/chart/memory'; 6 | 7 | reveal.initialize({ 8 | history: true, 9 | transition: 'slide', 10 | }); 11 | 12 | highlight.initHighlightingOnLoad(); 13 | -------------------------------------------------------------------------------- /src/main.less: -------------------------------------------------------------------------------- 1 | @import "~flexboxgrid"; 2 | @import "~reveal.js/css/reveal.css"; 3 | @import "~reveal.js/css/theme/black.css"; 4 | @import "~highlight.js/styles/atom-one-light.css"; 5 | @import "css/styles"; 6 | -------------------------------------------------------------------------------- /src/static/images/MVVM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RobinCK/vue-presentation/9a1821c7572bf383a90728fe5b86c2ca988846ce/src/static/images/MVVM.png -------------------------------------------------------------------------------- /src/static/images/components.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RobinCK/vue-presentation/9a1821c7572bf383a90728fe5b86c2ca988846ce/src/static/images/components.png -------------------------------------------------------------------------------- /src/static/images/devtool.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RobinCK/vue-presentation/9a1821c7572bf383a90728fe5b86c2ca988846ce/src/static/images/devtool.png -------------------------------------------------------------------------------- /src/static/images/doc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RobinCK/vue-presentation/9a1821c7572bf383a90728fe5b86c2ca988846ce/src/static/images/doc.png -------------------------------------------------------------------------------- /src/static/images/events-props.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RobinCK/vue-presentation/9a1821c7572bf383a90728fe5b86c2ca988846ce/src/static/images/events-props.png -------------------------------------------------------------------------------- /src/static/images/lifecycle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RobinCK/vue-presentation/9a1821c7572bf383a90728fe5b86c2ca988846ce/src/static/images/lifecycle.png -------------------------------------------------------------------------------- /src/static/images/nuxt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RobinCK/vue-presentation/9a1821c7572bf383a90728fe5b86c2ca988846ce/src/static/images/nuxt.png -------------------------------------------------------------------------------- /src/static/images/photo-evan-you.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RobinCK/vue-presentation/9a1821c7572bf383a90728fe5b86c2ca988846ce/src/static/images/photo-evan-you.jpeg -------------------------------------------------------------------------------- /src/static/images/photo-igor-ognichenko.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RobinCK/vue-presentation/9a1821c7572bf383a90728fe5b86c2ca988846ce/src/static/images/photo-igor-ognichenko.jpg -------------------------------------------------------------------------------- /src/static/images/reactivity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RobinCK/vue-presentation/9a1821c7572bf383a90728fe5b86c2ca988846ce/src/static/images/reactivity.png -------------------------------------------------------------------------------- /src/static/images/vuex-shared.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RobinCK/vue-presentation/9a1821c7572bf383a90728fe5b86c2ca988846ce/src/static/images/vuex-shared.png -------------------------------------------------------------------------------- /src/static/images/vuex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RobinCK/vue-presentation/9a1821c7572bf383a90728fe5b86c2ca988846ce/src/static/images/vuex.png --------------------------------------------------------------------------------