diff --git a/.gitignore b/.gitignore index b53f1e9508..7c13a2dbcd 100644 --- a/.gitignore +++ b/.gitignore @@ -5,4 +5,4 @@ db.json node_modules/ public/ .deploy*/ -source/_drafts \ No newline at end of file +src/_drafts diff --git a/src/_drafts/secrets_of_frontend_rendering_performance.md b/src/_drafts/secrets_of_frontend_rendering_performance.md deleted file mode 100644 index 20e877ad66..0000000000 --- a/src/_drafts/secrets_of_frontend_rendering_performance.md +++ /dev/null @@ -1,10 +0,0 @@ -- Performance Scenarios - - Initial render vs. Hot Updates - - Replacing entire dataset vs. mutating properties - - High binding density vs. Low binding density - -- Optimizability - - Angular: track-by, digest cycle is the root of all evil - - React: should component update or Immutable Data - - http://jlongster.com/Using-Immutable-Data-Structures-in-JavaScript - - Vue: track-by, avoid replacing huge amount of data diff --git a/src/_drafts/unobtrusive_reactivity.md b/src/_drafts/unobtrusive_reactivity.md deleted file mode 100644 index 487c6b03e9..0000000000 --- a/src/_drafts/unobtrusive_reactivity.md +++ /dev/null @@ -1,39 +0,0 @@ -title: Unobtrusive Reactivity -date: 2014-12-08 15:02:14 -tags: ---- - -- Simplicity as a Feature -- Powerful Computed Properties - - compare -- State management is flexible - - Two-way binding is optional - - Vuex - - Redux - - NuclearJS -- Performance - - best hot update performance - -Ref - -- Immutable Data Structure: interop issue - - http://jlongster.com/Using-Immutable-Data-Structures-in-JavaScript -- Global or local state - it is all about Identity - - https://twitter.com/floydophone/status/649786438330945536 - - https://twitter.com/sebmarkbage/status/647866515308449792 -- [Ember Object](http://guides.emberjs.com/v2.0.0/object-model/) - - Cumbersome wrapper with additional syntax - - Manually listed dependency for computed properties -- [Angular $apply](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply) - - must know when to call $apply - - performance directly related to watcher count and hard to optimize - - stabilization problem -- React - - "dirty checking at the DOM structure layer" - - must call `setState` or, remember to call render! - - performance is not free - - `shouldComponentUpdate` - - Immutable + Flux -- Polymer - - weak reactivity due to limitations of Object.observe -- [Mobservable](http://survivejs.com/blog/mobservable-interview/) diff --git a/src/_drafts/why_vue.md b/src/_drafts/why_vue.md deleted file mode 100644 index 25ee3d1333..0000000000 --- a/src/_drafts/why_vue.md +++ /dev/null @@ -1,38 +0,0 @@ -1. Simple, unobtrusive Reactivity - - Simplicity as a Feature - - Powerful Computed Properties - - compare with: KO, Ember, Polymer... - - Put It Anywhere - - examples (in-component, vuex, redux, NuclearJS) - -2. Components All The Way - - Application as a Component Tree - - Single-File Components with Webpack - - Proprocessrs - - demo (webpack + vue-loader, vue CLI maybe) - -3. Lean, Extensible Core - - Pick What You Need - - Directives, Components, Mixins - - Configurable - -4. Performance - - Asynchronous & Precise DOM Updates - - Dependency Tracking vs. Dirty Checking vs. Virtual DOM - - Performance Scenarios - - Optimizability - - demo demo demo (dbmon, large dataset, drawing circles) - -5. Transition System - - Make animations data-driven - - Auto handling the CSS tricky-ness - - Powerful JavaScript hooks - - Demos demos demos (recreate React Motion stuff) - -6. Solid Track Record - - Used in Production - - Readable Source - - Ruthlessly Covered - - Actively Maintained - - open/total issues - - bug fix speed (issue stats) diff --git a/src/_posts/1.0.0-release.md b/src/_posts/1.0.0-release.md new file mode 100644 index 0000000000..3ef2c50854 --- /dev/null +++ b/src/_posts/1.0.0-release.md @@ -0,0 +1,102 @@ +--- +title: Vue.js 1.0.0 Released +date: 2015-10-31 00:00:00 +--- + +After ~300 commits, 8 alphas, 4 betas and 2 release candidates, today I am very proud to announce the release of [Vue.js 1.0.0 Evangelion](https://github.com/vuejs/vue/releases/tag/1.0.0)! Many thanks to all those who participated in the API re-design process - it would not have been possible without all the input from the community. + + + +### Improved Template Syntax + +The 1.0 template syntax resolves a lot of subtle consistency issues and makes Vue templates more concise and more readable in general. The most notable new feature is the shorthand syntax for `v-on` and `v-bind`: + +``` html + + + + + +``` + +When used on a child component, `v-on` listens for custom events and `v-bind` can be used to bind props. The shorthands using child components very succinct: + +``` html + + +``` + +### API Cleanup + +The overall goal for Vue.js 1.0 is to make it suitable for larger projects. This is why there are many API deprecations. Except for ones that are barely used, the most common reason for a deprecation is that the feature leads to patterns that damages maintainability. Specifically, we are deprecating features that make it hard to maintain and refactor a component in isolation without affecting the rest of the project. + +For example, the default asset resolution in 0.12 has implicit fallbacks to parents in the component tree. This makes the assets available to a component non-deterministic and subject how it is used at runtime. In 1.0, all assets are now resolved in strict mode and there are no longer implicit fallbacks to parent. The `inherit` option is also removed, because it too often leads to tightly coupled components that are hard to refactor. + +### Faster Initial Rendering + +1.0 replaces the old `v-repeat` directive with `v-for`. In addition to providing the same functionality and more intuitive scoping, `v-for` provides up to **100%** initial render performance boost when rendering large lists and tables! + +### More Powerful Tooling + +There are also exciting things going on outside of Vue.js core - [vue-loader](https://github.com/vuejs/vue-loader) and [vueify](https://github.com/vuejs/vueify) have received major upgrades including: + +- Hot component reloading. When a `*.vue` component is edited, all of its active instances are hot swapped without reloading the page. This means when making small changes, e.g. tweaking the styles or the template, your app doesn't need to fully reload; the state of the app the the swapped component can be preserved, drastically improving the development experience. + +- Scoped CSS. By simply adding a `scoped` attribute to your `*.vue` component style tags, the component's template and final generated CSS are magically re-written to ensure a component's styles are only applied to its own elements. Most importantly, the styles specified in a parent component **does not** leak down to child components nested within it. + +- ES2015 by default. JavaScript is evolving. You can write much cleaner and expressive code using the latest syntax. `vue-loader` and `vueify` now transpiles the JavaScript in your `*.vue` components out of the box, without the need for extra setup. Write future JavaScript today! + +Combined with [vue-router](https://github.com/vuejs/vue-router), Vue.js is now more than a library - it provides a solid foundation for building complex SPAs. + +### Upgrade Guide + +#### General Tips + +- If you are familiar with 0.12. or upgrading an active app from 0.12: + + 1. Read through the [notable changes](#Notable_Changes_from_0-12) below to get a general idea of the relatively big changes. + + 2. Read through the [revised official guide](http://vuejs.org/guide/). It is highly recommended to do this before you upgrade. + + 3. Upgrade to the [1.0.0 migration build](https://github.com/vuejs/vue/releases/tag/1.0.0-migration) first. The migration build is fully 0.12.16 compatible and also includes all the new features in 1.0.0. It also raises deprecation warnings for any usage of deprecated API. + + 4. Consult the [full changelog](https://github.com/vuejs/vue/releases/tag/1.0.0) and the [updated API Reference](http://vuejs.org/api/) as you work through the deprecation warnings. Once your app no longer raises any warnings using the migration build, it should work properly in 1.0.0. + +- If you are relatively new to Vue.js: + + - Just go read the [official guide](http://vuejs.org/guide/)! + +### Notable Changes from 0.12 + +- **Data Binding Syntax Change** + + This is the biggest change: directive syntax has been overhauled. No more multiple clauses; arguments are now placed inside the attribute name. The attribute value should now always be a single JavaScript expression followed by filters. + + - [Cheatsheet and Details](https://github.com/vuejs/vue/issues/1325) + +- **Strict Mode by Default** + + In the past, asset resolution (components, directives, filters...) has implicit fallback: if an asset is not found in the current component, Vue.js will recursively look for it in its parent, its parent's parent... and so on. This allows you to, say, define a component in the root instance and use it in any child component. It is convenient, however we've found that in large projects it results to implicit coupling between a child component and its ancestors. It also hurts maintainability - when you are looking at a child component in isolation, it's hard to identify where an asset comes from because it could've been provided by **any** ancestor up the component chain. + + Therefore, in 1.0 all asset resolution is "strict": an asset should either be defined on the current component, or defined as a true global asset (using one of the global `Vue.xxx` asset registration methods). + +- **Bye v-repeat, Hi v-for** + + `v-repeat` has been replaced by `v-for`, which is **much** faster, but comes with a few differences: + + 1. A alias is required now: so you should always do `v-for="item in items"`, no more `v-for="items"`. + + 2. The scoping is different when you use `v-for` on a component - it no longer automatically injects the data into the component, you need to explicitly pass it down using props. This makes the child component explicit about where its data comes from. + + - [Details](https://github.com/vuejs/vue/issues/1200) + - [Docs](http://vuejs.org/guide/list.html) + +- **<slot> is the new <content>** + + The Web Components spec drafters are ditching the `` API in favor of ``. Since Vue.js components are modeled after Web Components, and since the `` API does make things more explicit than relying on CSS selectors, we are moving to the `` API too. + + - [Reference](https://hacks.mozilla.org/2015/06/the-state-of-web-components/) + - [Docs](http://vuejs.org/guide/components.html#Content_Distribution_with_Slots)