A presentation on Vue.js and how to pick frameworks and build web UIs quickly and effectively. The presentation also includes a workshop that goes through the building process of a todo list application in JavaScript, Vue and Buefy (based on Bulma).
ECMAScript), the browser’s programming language, was a very bad language a few years ago. It was missing many features, no modules, confusing object oriented concepts and weird unexpected behavior. Nowadays it is constantly improving, and the pace of browser support is also accelerating, so over time it is quickly becoming a good development language. JavaScript is also not strongly typed, which can cause issues with a large codebase.
Babel allow us to transpile newer versions of JavaScript into browsers that support older versions, to mitigate the slow improvement pace of browsers. TypeScript (Microsoft) and Dart (Google) were created both for adding type safety to front-end, and for fixing many issues with the JavaScript language, such as modules, classes, etc. Flow (Facebook) is a tool which allows to add type checking on top of JavaScript without inventing a new language or a superset of the language.
way to run code on the browser is WebAssembly, which allows developers to compile any compiled language (C#, Java, Rust, C/C++, etc) into WebAssembly - but this is mostly used for running existing C++ code in the browser to integrate with HTML5 APIs like WebGL.
like Python can’t run in the browser because they require loading a virtual machine, which is extremely heavy. For Python specifically, tabs must also be preserved which makes it even harder in some scenarios.
languages and frameworks today for web development: JavaScript Native TypeScript Microsoft Flow and Babel Facebook / Babel TypeScript is a superset of JavaScript (which means it’s backwards compatible) but with type safety support. Transpiles into JavaScript. Native browser support, dynamically typed language. Not very advanced and has some legacy unexpected behavior. Constantly evolving. Babel allows using more advanced JS and Flow is a type checker for JS that gives type safety. These are not new languages, but tools you can use.
JavaScript is still #1 and with the constant improvements and tools like Flow it will likely continue to dominate. The other languages such as Dart are not as commonly used as much as JS and TS.. This chart shows a bit how common TypeScript is compared to Flow, Babel and Coffeescript. The downward trend of Babel is probably due to TypeScript taking over. https://www.npmtrends.com/typescript-vs-flow-bin-vs-coffee-s cript-vs-babel-core-vs-elm-vs-clojurescript
to pack your JavaScript at all and to keep it simple, pick Native JavaScript because it’s your only option. If you do want to pack your JavaScript code, use Webpack and optionally Babel which will give you more advanced JavaScript.. If you want type safety, but don’t want to teach your developers a new dialect, use Flow with Babel. If you want the most modern, strongly typed language with good IDE support (VS Code supports it out of the box), and good community support, go with TypeScript. Do you want to pack your code? Do you want type safety? Plain JavaScript Babel TypeScript Do you want the best community and IDE support, and the most modern language? Flow Recommended! Yes Yes Yes No No No
React on GitHub stars How to Pick a Web Framework https://dzone.com/articles/react-vs-angular-vs-vuejs-a-complete-comparison-gu React 134,254 Stars on GitHub Vue 145,855 Stars on GitHub Angular 50,220 Stars on GitHub Most common web framework, with the largest community support Fully fledged framework, hardest to learn but the most comprehensive
similar for all 3, but React has the most downloads according to NPM. Use React if you want the most community support and easier developer hiring or if you want to rely a lot on exotic/specific/random widgets. Use Vue if you want to start coding quickly and easily, as it is a “progressive” web application, meaning you don’t need to learn everything at once - and it also relies mostly on the HTML syntax you already know. Use Angular if you want a comprehensive, enterprise-grade out of the box, opinionated framework with capabilities such as dependency injection. https://www.npmtrends.com/react-vs-@angular/core-vs-vue
is a critical decision, because you will need to learn a lot of very framework specific HTML semantics to be able to design your UI. Relatively new, good looking, does not require JavaScript for basic functionality The most common framework, not that good looking Google’s design language, very basic and clean look. Implemented by several different projects, such as Materialize and MDL Bootstrap 135,162 Stars on GitHub Bulma 36,074 Stars on GitHub Material Design 31,357 Stars on GitHub
framework, make sure that the design language is suited for your application. However, community support is also critical for being able to use templates and components from the internet, and to use frameworks that your developers are already friendly with. Bootstrap is leading by a long shot, but it doesn’t mean it’s the best as it’s the oldest. Bulma is a very new and rising framework which does not require JavaScript at all (unlike Bootstrap), and it also looks great. https://www.npmtrends.com/bulma-vs-semantic-ui-vs-material ize-css-vs-foundation-sites-vs-uikit
web framework and a CSS framework, it’s time to pick a matching UI framework, which features rich, easy-to-use components. For this exercise, we picked Buefy, which is a Vue/Bulma UI Framework. + =
a web framework and a CSS framework, the best parameter you should be looking at when picking a UI framework is: 1. The amount of components 2. The customizability of these components 3. The community support (GitHub Stars/# of downloads) as always. Bootstrap-vue seems to lead for Bootstrap, and Vuetify for Material Design. Next up is Buefy for Bulma, unfortunately much less common than the first two. https://www.npmtrends.com/semantic-ui-vs-buefy-vs-bootstra p-vue-vs-vuetify-vs-quasar-framework
the MVVM pattern (Model-View-ViewModel). Vue components play the role of the ViewModel and tie the View components into plain JavaScript objects in such a way that a change in the DOM updates the Model, and vice versa.
of your app will attempt to update models from different places, leading to unexpected behavior. Vuex allows you to build large applications by properly managing the state of the application through traceable state functions and not through implicit and untraceable view/model changes.
be to code “.vue” components, and use a package manager such as npm / yarn and then webpack for compiling and developing. https://vuejs.org/v2/guide/single-file-components.html However, for the sake of simplicity, we are going to work without packing and native JavaScript with CDN includes.
new empty folder. https://code.visualstudio.com/ 2. Create a new file called index.html on your laptop, and copy paste the standalone application. https://buefy.org/documentation/start 3. Then, open index.html using your standard web browser.
but we’ll do it anyways because it’s essential for just about any application. 1. Go to Navbar https://buefy.org/documentation/navbar 2. Copy paste the code before the main container 3. Change the navbar to be colored in a light gray color (figure out how on your own)
https://buefy.org/documentation/button 2. Copy the b-button element into the <div id=”app”> HTML section 3. Copy the JS code which acts on the button to the methods section 4. Now make sure that clicking the button in your HTML page does what the example does (opens a notification on the top right corner of the screen)
https://buefy.org/documentation/button 2. Add the relevant code to the “add task” button so that the icon will be a “plus” sign and the color will be “primary” (Purple in bulma) 3. Add a “Remove selected” red button with a trash icon, right next to the “Add task” button 4. You will notice that the icons don’t appear at first. This is probably because you did not load the icons: https://buefy.org/documentation/start icon-plus icon-delete
Input https://buefy.org/documentation/input 2. Copy the first input field example into the app section 3. Change the v-model property to point at the “newTask ” variable 4. Initialize the “newTask ” variable to be an empty string (“”) under the data section in the Vue app 5. From this point on, the task app variable is bound to the input field’s value. If one changes, the other will change as well. new Vue({ ... data: { newTask: "" // bind with v-model } ... })
2. Let’s disable the “Add Task” button using the :disabled property. 3. The property receives a boolean statement which, if true, will cause the “Add task” button to be disabled. 4. The task input is bound to the newTask app variable. Therefore, we want to disable the button when newTask.length is 0, or newTask is equal to "".
Table https://buefy.org/documentation/table 2. Add a “checkable” table into your code carefully - you will need to understand the syntax of the component and add a few variables to the data section. 3. Change the columns object to have only two columns: task and date . 4. Rename the “ data ” field into “ tasks ” (this will hold our todos), and copy checkedRows as well (it will store which rows are currently checked). 5. You don’t need is-row-checkable and checkbox-position as they have defaults. 6. Note that in the example, data is a function because of how checkedRows is defined. We don’t need to have it as a function, so you’ll need to make sure that checkedRows will be initialized to an empty list when copying the parameters.
https://buefy.org/documentation/table 2. Add a template for table columns so that the date will be human readable by copying the code from the “Sandbox with custom template” section (copy the <template slot-scope="props"> section) 3. Once the template is inserted, you no longer need to define the “ columns ” section in the b-table component, because the template redefines the columns - so you may delete it. 4. Set the date field to be about 60px wide, the rest will be taken by the task column.
and buttons go here --> </section> <section class="section"> <!-- table goes here --> </section> </div> </div> 1. Go to Layout & elements https://buefy.org/documentation/layout 2. Wrap everything in a container to center everything in the page (except for the navbar). 3. Wrap the input field and buttons in one section. 4. Wrap the table in another section 5. Make sure your todo list looks like the screenshot. container section section
using @click to a new method called addTask in the methods section. 2. In addTask , let’s push a new task into the tasks variable and empty the input. 3. The tasks is bound to the view, so the view will update automatically! methods: { ... addTask() { this.tasks.push({ "task": this.newTask, "date": Date.now() }); this.newTask = ""; }, ... }
using @click to a new method called removeSelected in the methods section 2. For each row in checkedRows , let’s remove the task from the tasks variable by finding the index of the task structure and remove it with splice. 3. checkedRows needs to be erased as well because we deleted the rows and they no refer to inexistent rows. methods: { ... removeSelected() { this.checkedRows.forEach( row => this.tasks.splice( this.tasks.indexOf(row), 1) ); this.checkedRows = []; }, ... }
“ mounted ” and “ watch ” functions to store and retrieve the task list. 3. Use JSON.stringify and JSON.parse to encode/decode before storing in localStorage, because localStorage can only store strings. new Vue({ ... mounted() { if (localStorage.tasks) { this.tasks = JSON.parse( localStorage.tasks ); } }, watch: { tasks(newTasks) { localStorage.tasks = JSON.stringify( newTasks ); } }, ... })
task is checked • Add a task also when the user hits enter (hint: @keyup.enter.native) • Create a nice looking notification when a task is added https://buefy.org/documentation/notification • Create a Login modal when clicking on Login (login modal in code example) https://buefy.org/documentation/modal • Use Vuex • Implement a real backend
ronreiter
bbqallstars
oracle4engineer
shumei_ito
blueb
smt7174
koichiotomo
shonansurvivors
nikkei_engineer_recruiting
tacck
cyberagentdevelopers
shigashiyama
gumamon
rasmusluckow
brettharned
tanoku
morganepeng
denniskardys
pedronauck
addyosmani
speakerdeck
samanthasiow
soudai
jponch
irinanazarova
