Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Web UIs

ronreiter
August 16, 2019

Building Web UIs

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).

ronreiter

August 16, 2019
Tweet

More Decks by ronreiter

Other Decks in Technology

Transcript

  1. Agenda You’re going to learn how to build a todo

    list application from scratch. Time required: ~2 hours
  2. Resources • The Code https://codepen.io/ronreiter/pen/RXmeeR • Buefy https://buefy.org • Bulma

    https://bulma.io • Vue.js https://vuejs.org/ • VS Code https://code.visualstudio.com/
  3. What do we need to pick? • Programming Language /

    Framework ◦ JavaScript ◦ Flow - 20k Stars ◦ TypeScript (52k Stars) ◦ Babel (Future JS Compiler) (34k Stars) ◦ CoffeeScript (15k Stars) ◦ ClojureScript (8.1k Stars) ◦ Elm (5.3k Stars) ◦ PureScript (5.9k Stars) ◦ Dart (4k Stars) • Web Framework ◦ React (134k Stars) ◦ Vue (145k Stars) ◦ Angular (50k Stars) • Package Manager ◦ Yarn (36k Stars) ◦ Npm (17k Stars) • CSS Framework ◦ Bootstrap (135k Stars) ◦ Bulma (36k Stars) ◦ Material Design (Materialize) (36k Stars) ◦ Semantic UI (46k Stars) ◦ Foundation (28k Stars) ◦ UI Kit (15k Stars) ◦ SpectreCSS (9.5k Stars) ◦ Primer (8.5k Stars) • UI Framework ◦ Web Framework specific ◦ CSS Framework specific • Packer ◦ Webpack (50k Stars) ◦ Parcel (32k Stars) ◦ Rollup.js (16k Stars)
  4. The Trend of Programming Languages in the Browser JavaScript (Officially

    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.
  5. The Trend of Programming Languages in the Browser Tools like

    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.
  6. The Trend of Programming Languages in the Browser Another new

    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.
  7. The Trend of Programming Languages in the Browser Interpreted languages

    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.
  8. Front-End Programming Languages / Frameworks These are the most common

    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.
  9. The Trend of Programming Languages/Frameworks TypeScript is going strong nowadays.

    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
  10. How to Pick a Programming Language/Framework If you don’t want

    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
  11. The easiest to learn, with a progressive approach. Recently surpassed

    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
  12. How to Pick a Web Framework Open source adoption is

    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
  13. How to Pick a CSS Framework Picking a CSS Framework

    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
  14. How to Pick a CSS Framework When picking a CSS

    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
  15. How to Pick a UI Framework Once you picked a

    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. + =
  16. How to Pick a UI Framework Assuming you’ve already picked

    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
  17. What is Vue? Vue.js is a web framework which implements

    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.
  18. Example Two-way binding using v-model Hello, world! <div id=”app”> <input

    v-model=”hello”> </div> new Vue({ el: “#app”, data: appdata }) View (HTML DOM) ViewModel (Vue Component) Model (JavaScript Object) appdata = { hello: “Hello, world!” }
  19. Vuex State Management https://vuex.vuejs.org/ As your application grows, different parts

    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.
  20. How to start coding with Vue The proper method would

    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.
  21. Environment Setup 1. First, download VS Code and open a

    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.
  22. Add a Navbar It will be useless for this exercise,

    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)
  23. Make a Button 1. Go to UI Components > Button

    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)
  24. Style Your Buttons 1. Go to UI Components > Button

    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
  25. Add an Input Field 1. Go to UI Components >

    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 } ... })
  26. Conditional Disable 1. Go to UI Components > Button https://buefy.org/documentation/button

    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 "".
  27. Add a Checkable Table 1. Go to UI Components >

    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.
  28. Customize the Date 1. Go to UI Components > Table

    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.
  29. Layout <div id="app"> <b-navbar>...</b-navbar> <div class="container"> <section class="section"> <!-- input

    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
  30. Logic - Add Task 1. Connect the “Add task” button

    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 = ""; }, ... }
  31. Logic - Remove Tasks 1. Connect the “remove selected” button

    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 = []; }, ... }
  32. Logic - Storage 1. Read this: https://vuejs.org/v2/cookbook/client-side-storage.html 2. Add a

    “ 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 ); } }, ... })
  33. Finishing touches • Conditionally disable remove selected button if no

    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