1"use strict";(self.webpackChunkelectronjs=self.webpackChunkelectronjs||[]).push([["19999"],{9323(e,t,n){n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>u,frontMatter:()=>a,metadata:()=>r,toc:()=>c});var r=n(94697),o=n(74848),s=n(28453);let a={title:"Use V8 and Chromium Features in Electron",date:new Date("2016-01-07T00:00:00.000Z"),authors:"jlord",slug:"latest-v8-chromium-features",tags:["features"]},i,l={authorsImageUrls:[void 0]},c=[{value:"ES6 Support through V8",id:"es6-support-through-v8",level:2},{value:"Chromium Features",id:"chromium-features",level:2},{value:"What are you excited about?",id:"what-are-you-excited-about",level:2}];function h(e){let t={a:"a",code:"code",h2:"h2",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:["Building an Electron application means you only need to create one codebase and design for one browser, which is pretty handy. But because Electron stays up to date with ",(0,o.jsx)(t.a,{href:"http://nodejs.org",children:"Node.js"})," and ",(0,o.jsx)(t.a,{href:"https://www.chromium.org",children:"Chromium"})," as they release, you also get to make use of the great features they ship with. In some cases this eliminates dependencies you might have previously needed to include in a web app."]}),"\n",(0,o.jsx)(t.hr,{}),"\n",(0,o.jsxs)(t.p,{children:["There are many features and we'll cover some here as examples, but if you're interested in learning about all features you can keep an eye on the ",(0,o.jsx)(t.a,{href:"http://blog.chromium.org",children:"Google Chromium blog"})," and ",(0,o.jsx)(t.a,{href:"https://nodejs.org/en/download/releases",children:"Node.js changelogs"}),". You can see what versions of Node.js, Chromium and V8 Electron is using at ",(0,o.jsx)(t.a,{href:"https://electronjs.org/#electron-versions",children:"electronjs.org/#electron-versions"}),"."]}),"\n",(0,o.jsx)(t.h2,{id:"es6-support-through-v8",children:"ES6 Support through V8"}),"\n",(0,o.jsxs)(t.p,{children:["Electron combines Chromium's rendering library with Node.js. The two share the same JavaScript engine, ",(0,o.jsx)(t.a,{href:"https://developers.google.com/v8",children:"V8"}),". Many ECMAScript 2015 (ES6) features are already built into V8 which means you can use them in your Electron application without any compilers."]}),"\n",(0,o.jsxs)(t.p,{children:["Below are a few examples but you can also get classes (in strict mode), block scoping, promises, typed arrays and more. Check out ",(0,o.jsx)(t.a,{href:"https://nodejs.org/en/docs/es6/",children:"this list"})," for more information on ES6 features in V8."]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"Arrow Functions"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"findTime () => {\n console.log(new Date())\n}\n"})}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"String Interpolation"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"var octocat = 'Mona Lisa';\nconsole.log(`The octocat's name is ${octocat}`);\n"})}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"New Target"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:'Octocat() => {\n if (!new.target) throw "Not new";\n console.log("New Octocat");\n}\n\n// Throws\nOctocat();\n// Logs\nnew Octocat();\n'})}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"Array Includes"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"// Returns true\n[1, 2].includes(2);\n"})}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"Rest Parameters"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"// Represent indefinite number of arguments as an array\n(o, c, ...args) => {\n console.log(args.length);\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"chromium-features",children:"Chromium Features"}),"\n",(0,o.jsx)(t.p,{children:"Thanks to all the hard work Google and contributors put into Chromium, when you build Electron apps you can also use cool things like (but not limited to):"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://googlechrome.github.io/samples/mouseevent-get-modifier-state/index.html",children:"MouseEvent.getModifierState()"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://googlechrome.github.io/samples/css-escape/index.html",children:"CSS.escape()"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://googlechrome.github.io/samples/fetch-api/fetch-response-stream.html",children:"Fetch API Streaming"})}),"\n"]}),"\n",(0,o.jsxs)(t.p,{children:["Follow along with the ",(0,o.jsx)(t.a,{href:"http://blog.chromium.org",children:"Google Chromium blog"})," to learn about features as new versions ship and again, you can check the version of Chromium that Electron uses ",(0,o.jsx)(t.a,{href:"https://electronjs.org/#electron-versions",children:"here"}),"."]}),"\n",(0,o.jsx)(t.h2,{id:"what-are-you-excited-about",children:"What are you excited about?"}),"\n",(0,o.jsxs)(t.p,{children:["Tweet to us ",(0,o.jsx)(t.a,{href:"https://twitter.com/electronjs",children:"@ElectronJS"})," with your favorite features built into V8 or Chromium."]})]})}function u(e={}){let{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},28453(e,t,n){n.d(t,{R:()=>a,x:()=>i});var r=n(96540);let o={},s=r.createContext(o);function a(e){let t=r.useContext(s);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),r.createElement(s.Provider,{value:t},e.children)}},94697(e){e.exports=JSON.parse('{"permalink":"/blog/latest-v8-chromium-features","source":"@site/blog/latest-v8-chromium-features.md","title":"Use V8 and Chromium Features in Electron","description":"Building an Electron application means you only need to create one codebase and design for one browser, which is pretty handy. But because Electron stays up to date with Node.js and Chromium as they release, you also get to make use of the great features they ship with. In some cases this eliminates dependencies you might have previously needed to include in a web app.","date":"2016-01-07T00:00:00.000Z","tags":[{"inline":false,"label":"Features","permalink":"/blog/tags/features","description":"Showcasing new features in Electron core"}],"readingTime":1.94,"hasTruncateMarker":false,"authors":[{"name":"jlord","url":"https://github.com/jlord","imageURL":"https://github.com/jlord.png?size=96","key":"jlord","page":null}],"frontMatter":{"title":"Use V8 and Chromium Features in Electron","date":"2016-01-07T00:00:00.000Z","authors":"jlord","
1slug":"latest-v8-chromium-features","tags":["features"]},"unlisted":false,"prevItem":{"title":"What\'s new in Electron 0.37","permalink":"/blog/electron-37"},"nextItem":{"title":"API Changes Coming in Electron 1.0","permalink":"/blog/electron-api-changes"}}')}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.