תוכנית יומית לכנס התכנסות וארוחת בוקר

Transcription

1 תוכנית יומית לכנס התכנסות וארוחת בוקר 08:00-09:00 הרצאה הפסקה ראשונה הרצאה ארוחת צהריים הרצאה הפסקה מתוקה -09:00-10:30-10:30-10:45-10:45-12:30-12:30-13:30-13:30-15:00-15:00-15:15 הרצאה 15:15-16:30 לפרטים נוספים: טל פקס ג'ון ברייס הדרכה, חומה ומגדל 29 תל אביב, מיקוד

2

3 Creating Single Page Apps with Vue.js 1

4 2

5 3

6 4

7 5

8 6

9 7

10 8

11 9

12 10

13 11

14 12

15 13

16 14

17 15

18 16

19 17

20 18

21 19

22 20

23 21

24 22

25 23

26 24

27 25

28 26

29 27

30 28

31 29

32 30

33 31

34 32

35 33

36 34

37 JSON - Introduction JSON: JavaScript Object Notation. JSON is a syntax for storing and exchanging data. JSON is text, written with JavaScript object notation. 35

38 JSONP JSONP is a method for sending JSON data without worrying about cross-domain issues. JSONP does not use the XMLHttpRequest object. JSONP uses the <script> tag instead. That's all there is to know about JSONP: it's a callback and script tags. Cross-Origin Resource Sharing (CORS) W3C spec that allows cross-domain communication from the browser. By building on top of the XMLHttpRequest object, CORS allows developers to work with the same idioms as samedomain requests. 36

39 37

40 38

41 39

42 40

43 41

44 42

45 43

46 44

47 45

48 46

49 Offline Web applications In order to enable users to continue interacting with Web applications and documents even when their network connection is unavailable authors can provide a manifest which lists the files that are needed for the Web application to work offline and which causes the user's browser to keep a copy of the files for use offline. 47

50 What is HTML Local Storage? With local storage, web applications can store data locally within the user's browser. Before HTML5, application data had to be stored in cookies, included in every server request. Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance. Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server. Local storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data What & Why indexeddb? The indexeddb is a new HTML5 concept to store the data inside user's browser. indexeddb is more power than local storage and useful for applications that requires to store large amount of the data. These applications can run more efficiency and load faster. Features it stores key-pair values IndexedDB API is mostly asynchronous 48

51 What is HTML Canvas? The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript. The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images. What is a Web Worker? When executing scripts in an HTML page, the page becomes unresponsive until the script is finished. A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background. 49

52 HTML5 WebSocket Web Sockets is a next-generation bidirectional communication technology for web applications which operates over a single socket and is exposed via a JavaScript interface in HTML 5 compliant browsers. Once you get a Web Socket connection with the web server, you can send data from browser to server by calling a send() method, and receive data from server to browser by an onmessage event handler. New Input Types: color date datetime datetime-local month number range search tel time url week 50

53 HTML5 Drag and Drop Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different location. In HTML5, drag and drop is part of the standard: Any element can be draggable. XMLHttpRequest Level 2 introduces a slew of new capabilities which put an end to crazy hacks in our web apps; things like cross-origin requests, uploading progress events, and support for uploading/downloading binary data. These allow AJAX to work in concert with many of the bleeding edge HTML5 APIs such as File System API, Web Audio API, and WebGL. 51

54 Awesome New CSS3 Selectors Reverse/Parent Selectors Selective Style Resets Database Queries Send Redirect Pages More to Come CSS3 box-sizing Property CSS3 box-shadow Property CSS Borders HSL Colors - HSL stands for hue, saturation, and lightness. CSS3 Multi-column Layout CSS3 resize Property 52

55 CSS3 gradients let you display smooth transitions between two or more specified colors. Rule In the rule you must first define a name for the font (e.g. myfirstfont), and then point to the font file. CSS3 Media Queries CSS3 transform Property The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements. CSS3 Transitions CSS3 transitions allows you to change property values smoothly (from one value to another), over a given duration 53

56 54

57 55

58 56

59 JavaScript progressive framework We can scale up the framework s complexity incrementally, only when project s inherent complexity demands it Evan You, Creator of Vue.js Concept Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other frameworks, Vue is designed to be incrementally adopted. Core library is focused on the view layer only and can integrate with many other libraries and existing projects. On the other hand Vue is capable of creating powerful Single- Page Applications when combining supporting libraries. 57

60 Why Vue.js? Vue has it all to make development smooth and easy. With gentle learning curve. Vue is also lightweight, flexible, modular and highly performant. Vue is surrounded by amazing tools, as well as efficient state management (Vuex) and routing (Vue Router) options. Very fast growing community,documentations and high GitHub star rating. Trusted by big players like Netflix, Facebook, Xiaomi, Alibaba and much more. Comparison 58

61 Vue instance Every Vue application starts by creating a new Vue instance with the Vue function. The Vue components are instances of Vue. <html> <script> new Vue({ el: '#app', data: { message: Hello World } }) </script> <div id="app"> <p>{{ message }}</p> </div> </html> Vue lifecycle hooks Each Vue instance goes through a series of initialization steps called Lifecycle hooks. Lifecycle hooks are an important part of any serious component. You often need to know when your component is created, added to the DOM, updated, or destroyed. Lifecycle hooks are a window into how the library you re using works behind-the-scenes, and as such tend to invoke feelings of trepidation or unease for newcomers. Note: The hooks this property is pointed to the Vue instance, using => functions can cause problems because => functions are bound to the parent context. 59

62 Vue Instance Lifecycle Creation hooks Creation hooks are the very first hooks that run in your component. They allow you to perform actions before your component has even been added to the DOM. Unlike any of the other hooks, creation hooks are also run during serverside rendering. Use creation hooks if you need to set things up in your component both during client rendering and server rendering. You will not have access to the DOM or the elements in it. Creation hooks: Before create: The beforecreate hook runs at the very initialization of your component. data has not been made reactive, and events have not been set up yet. Created: In the created hook, you will be able to access reactive data and events are active. Templates and Virtual DOM have not yet been mounted or rendered. 60

63 Mounting hooks Mounting hooks are often the most-used hooks, for better or worse. They allow you to access your component immediately before and after the first render. They do not, however, run during server-side rendering. Use if You need to access or modify the DOM of your component immediately before or after the initial render. Mounting hooks: Before mount: The beforemount hook runs right before the initial render happens and after the template or render functions have been compiled. Most likely you ll never need to use this hook. Remember, it doesn t get called when doing server-side rendering. Mounted: In the mounted hook, you will have full access to the reactive component, templates, and rendered DOM. Mounted is the most-often used lifecycle hook. The most frequently used patterns are fetching data for your component and modifying the DOM, often to integrate non- Vue libraries. Updating hooks Updating hooks are called whenever a reactive property used by your component changes, or something else causes it to re-render. They allow you to hook into the watch-computerender cycle for your component. Use if You need to know when your component re-renders, perhaps for debugging or profiling. Updating hooks: Before update: The beforeupdate hook runs after data changes on your component and the update cycle begins, right before the DOM is patched and re-rendered. It allows you to get the new state of any reactive data on your component before it actually gets rendered. Updated: The updated hook runs after data changes on your component and the DOM re-renders. If you need to access the DOM after a property change, here is probably the safest place to do it. 61

64 Destruction hooks Destruction hooks allow you to perform actions when your component is destroyed, such as cleanup or analytics sending. They fire when your component is being torn down and removed from the DOM. Destruction hooks: Before destroy: beforedestroy is fired right before teardown. Your component will still be fully present and functional. If you need to cleanup events or reactive subscriptions, beforedestroy would probably be the time to do it. Mounted: By the time you reach the destroyed hook, there s pretty much nothing left on your component. Everything that was attached to it has been destroyed. You might use the destroyed hook to do any last-minute cleanup or inform a remote server that the component was destroyed. Installing Vue.js You can use Vue in few different ways: Direct script download the vue.js file and include it as a script: <script src= JS/vue.js ></script> CDN add the vue.js file from an updating CDN: <script src=" Install using NPM so you can use it on your code: npm install vue. Using Vue-CLI and install it using npm or yarn: npm install 62

65 Using Vue.js CLI To create a new project after installing vue-cli use: vue create project-name on vue cli version 3, or vue init webpack project-name for vue cli version 2 Answer the questions about the classes and dependencies for the project on vue-cli version 3 and higher you can use vue ui to open a web gui for creating and managing projects and dependencies. To launch the app on an http server use npm run dev To build the app to a file us npm run build Project structure After creating a project using vue-cli a folder will be created with contents as shown in the pic. The src folder contains the app main files: components, routings, and other files. main.js is the file where the vue app is created, app.vue is the main component mounted to main.js template. all other components shpuld be called within app.vue template 63

66 Components Components are reusable Vue instances. Each component have a name and can be called from other components template. Since components are reusable Vue instances, they accept the same options as any other vue instance, such as data, computed, methods, and lifecycle hooks. Each component contains 3 Basic parts: Template Script Style Components - Templates The component template is the html code that will be shown every time the component will be used. Within the template you can call other components using <component-name></component-name> You can use component variables with v-directives, interpolation {{variable}} or v-model for connecting input fields. You can use Vue functions like v-if, f-for, v-on and more. You can use component functions using v-on:click or other directives. 64

67 Components - Script The logic of the component. Holds the name of the component, data and functions. Within the script part you can import other components here for using them in your templates. You can create functions or lifecycle hooks and use them to modify your template or run your own code. You can send data to child component or parent component. Components - Style Holds all the css attributes for the component template. You can use <style scoped> </style> for limiting the css to this component only and it wont pass to child components or parent components. 65

68 Components Declaring data To declare data on a component you need to use the data() function, and return an object that contains all the data you need to use in the template. After you declare the data you can use the on the template or on functions. Child components On each component you can use other components by importing them to the script and calling them from the template using <componentname></component-name>. Child component and parent component can transfer data between them using props and events. 66

69 Components Props For using data transferred from parent component use props. The data is transferred from the parent component template when calling the component with an extra value. Parent component template: Child component script: V-directives Directives are special attributes with the v- prefix. A directive s job is to reactively apply side effects to the DOM when the value of its expression changes. Directives are used within the template part. 67

70 Forms To create forms and connect two way data you can use v-model. V-model automatically picks the correct way to update the element based on the input type. Vue supports JS validations methods and have a validation package you can install and use called vee-validate Router Vue Router is the official router for Vue.js. It deeply integrates with Vue.js core and used to build Single Page Applications easily. When adding Vue Router to our application, all we need to do is map our components to the routes and let Vue Router know where to render them. After importing the VueRouter package we command our vue app to use it: Vue.use(VueRouter). Then we create a VueRouter object and declaring paths to domponents. To use the router we add <router-link to= /my_path > component name </router-link> 68

71 Router route parameters You can pass route parameters to the page you are routing to by using <router-link to= /my_path/:my_parameter >. To use this parameter on your component use $route.params.my_parameter Once the user navigates from one parameter to another parameter on the same component, the component instance will be reused. This is more efficient than destroying and re creating the instance. (Note: this means the created lifecycle hooks wont be called) API VueResource To handle ajax request in vue application you can use any 3 rd party ajax library that is available. VueResource is one of those libraries that works well with vue.js. To use it just import the library and command the vue app to use it Vue.use(vue-resource) Next anytime you want to use the library use $http and chose the method you want to use. $http.get( API_url ) this will return a promise like all other ajax libraries. 69

72 VueX Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be changed in a predictable fashion. It also integrates with Vue's official devtools extension to provide advanced features such as zero-config timetravel debugging and state snapshot export / import. VueX - Store VueX is important when you want to hold data that will be shared and can be approached by all the components. The VueX store will hold all the data on its state object. The VueX store will have getters for getting data from the state with specific rules. The VueX store will have Mutations for synchronous changes to the data and Actions for a-synchronous changes. 70

73 Production Build In case the vue package is added by adding a script tag with the vue.js file or a cdn to the vue.js file, then no build is required. All functions will work on the page on every supporting browser. In case of a project built by vue-cli you need to use npm run build to create an index.html file and a folder contains all the needed files. To run the file you must use an HTTP server, the index.html page will not work normally while opened with browser Comments 71

74 Vue Instance Data and Methods Data binding Events 72

75 Two way data binding V-model Computed properties Conditionals v-if Looping with v-for 73

76 Vue CLI Vue project structure and files Components Nesting components 74

77 Props Lifecycle hooks HTTP requests - VueResource Vue Router 75

78 Router links Route parameters VueX VueX Store 76