It's been a while (14 years) since I last learn about Javascript, I think at that time still ES5, but since ES6 (=ES2015, released June 2015) and newer ones already out (but most of the browsers already implemented most of ES6 features way before), I think it's time to review one of the features (I think the only features I learned was Promise and async-await few years ago). ES6 introduces new loop syntax for..of:
// old one for(var k in arrOrObj) // iterate by key
// new one for(const v of arrOrObj) // iterate by value for(const v of Object.values(obj)) // iterate by value for(const kv of Object.entries(obj)) // iterate by key-value pair for(const [k,v] of Object.entries(obj)) // destructure
ES6 also introduces new data structure to store associative array, just like object, but difference:
unlike object, you don't have to worry that the key conflict with the object's property
iteration guaranteed by original insertion order, as far as I remember Object is random for Chrome and Sorted for Firefox
Has .size property, not Array .length
key not automatically converted as string, obj['1'] == obj[1]
let map = new Map(); // order by insert map.set('a',1) // not equal to map['a']=1 map.get('a') // not equal to map['a'] map.has('a') map.delete('a') // false if not exists
for(const [k,v] of map) // destructure for(const k of map.keys()) // iterate by key for(const v of map.values()) // iterate by value
ES6 spread operator also useful when dealing with Map, Object, or Array:
[...map] // get array of key-value pairs Array.from(map) // get array of key-value pairs [...map.keys()] // get array of keys [...map.values()] // get array of values map = new Map([...Object.entries(obj)].sort()) // order by key
new Map(map) // clone map new Map([['a',1],['b',2],['c',3]]) // create from array of key-value new Map([...map1, ...map2]) // merge map
The top performer for multi-query benchmark are: C++, Rust, Java, Scala, JS, Kotlin, PHP, and Go. It's interesting to see that VLang already entered this benchmark but only on plaintext and json serialization benchmark. Compared to previous benchmark, Scala is in, Python, Perl, and Dart are out of the screenshoted top tier for now.
Svelte is a tool for building fast web applications. It's a competitor to React, Vue, Ember, Aurelia, and Angular, but it's better since it was compiled/errors checked at compile time before combined into a bundle.js file, not needing any virtual DOM/different template file/language like JSX, also because Svelte has the lowest learning curve among all. To learn more why Svelte is better than the rest, see Rich Harris' presentation about Rethinking Reactivity. To create a new svelte project use this command after you installed nodejs, npm, and npx:
npx degit sveltejs/template project1 cd project1 npm install # install dependencies npm run dev
You can look at the result in the browser, and edit that project directly side by side (it has live reload). In Svelte, an application is composed from one or more components. A component is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written into a .svelte file. Here are some basics in svelte:
How to declare and use variable
First, add a <script> tag to your component and declare a variable (name) <script> let name = 'world'; </script> Then, we can refer to variable in the markup using curly braces. <h1>Hello {name}!</h1>
We can also use curly braces to put any JS we want.
How to create dynamic attributes:
We can use variable to create dynamic attributes:
<script> let src = 'tutorial/image.gif'; </script> <img src={src}> We can use variable to specify image source, so we can dynamically determine link source programmatically for example.
You can also use shorthand feature when variable name and attribute is the same, like this: <img {src}>
Styling
Just like in HTML, you can add a <style> tag to your component:
<style> p { color: purple; font-family: 'Comic Sans MS', cursive; font-size: 2em; } </style>
<p>This is a paragraph.</p>
What is special in svelte is style is scoped within component so when you set <p> style in one component, it wont accidentally change <p> style elsewhere within your app.
Nested component
It would be impractical to put your entire app in a single component. Instead, we can import components from other files and include them as though we were including elements.
For example we can have file Nested.svelte like this:
<p>This is another paragraph.</p> Then we can use Nested component by importing it like this: <script> import Nested from './Nested.svelte'; </script> Nested in this case can be anything, and totally independent to the file name (So you can name it anything, but it's a good practice to import with same name as the file name). And when we want to use it, just use it like you would when using predefined tags <p>This is a paragraph.</p> <!-- normal predefined tag -->
<Nested/> <!-- your made up tag -->
Notice that even though both
<p> and <Nested> actually used same
<p> tag, but each style is independent as now its considered different component. One more thing to remember, tag name is case sensitive, so <Nested> not the same with <nested>
Unescaping HTML tags
Ordinarily, strings are inserted as plain text, meaning that characters like < and > have no special meaning. But sometimes you need to render HTML directly into a component. For example, the words you're reading right now exist in a markdown file that gets included on this page as a blob of HTML.
<script> let str = `string contains <strong>HTML!!!</strong>`; </script> So instead of doing this: <p>{str}</p>
In Svelte, you can do this with the special {@html ...} tag:
<p>{@html str}</p>
Indonesia
Svelte adalah alat untuk membuat web application secara cepat. Svelte adalah pesaing dari React, Vue, Ember, Aurelia, and Angular, tapi svelte kami nilai lebih baik karena dicompile dan dicek error nya saat compile, baru kemudian digabungkan dalam file bundle.js, dan tidak membutuhkan virtual DOM atau file/bahasa template yang berbeda seperti JSX, svelte juga termasuk yang paling mudah dipelajari dibanding yang lainnya. Untuk lebih meyakinkan kenapa Svelte lebih baik dari yang lain, kamu bisa tonton persentasi Rich Harris tentang Rethinking Reactivity. Untuk membuat project Svelte yang baru gunakan perintah ini sesudah kamu menginstall nodejs, npm, dan npx:
npx degit sveltejs/template project1 cd project1 npm install # install dependencies npm run dev
Kamu bisa melihat hasil web mu di browser, dan meng edit project itu langsung secara berdampingan (Svelte punya live reload). Di dalam svelte aplikasi dibentuk dari satu atau lebih komponen. sebuah komponen adalah blok program yang berdiri sendiri dan bisa digunakan berulang kali, yang terdiri atas HTML, CSS dan Javascript yang saling berhubungan, dikumpulkan menjadi satu dalam file .svelte. Berikut adalah dasar-dasar dalam Svelte:
Cara mendeklarasi dan menggunakan variabel
Pertama, tambahkan tag <script> dan deklarasikan variabel (name) <script> let name = 'world'; </script> Kemudian kita bisa menggunakan variabel di dalam markup menggunakan kurung kurawal. <h1>Hello {name}!</h1> Kita juga bisa menggunakan kurung kurawal untuk memasukkan program JS.
Cara membuat atribut yang dinamis
Kita bisa menggunakan variabel untuk membuat atribut yang dinamis:
<script> let src = 'tutorial/image.gif'; </script> <img src={src}> Karena kita bisa menggunakan variabel untuk memasukkan alamat asal image, maka kita bisa mengatur alamatnya secara dinamis dalam pemrograman.
Kita juga bisa menggunakan cara singkat jika nama variabel dan nama atributnya sama, seperti ini:
<img {src}>
Styling
Sama persis seperti di HTML, kamu juga bisa menambahkan tag <style> ke komponen yang kamu buat.
<style> p { color: purple; font-family: 'Comic Sans MS', cursive; font-size: 2em; } </style> <p>This is a paragraph.</p> Yang istimewa dari svelte adalah style yang kamu tambahkan akan dibatasi hanya di dalam komponen tersebut, jadi misal dalam contoh di atas, style warna ungu tidak akan merubah style <p> lainnya dalam aplikasi buatanmu.
Nested component
Untuk tujuan pembuatan aplikasi yang baik, alangkah baiknya apabila kita tidak memasukkan smua app kita dalam satu komponen saja, melainkan bisa dipecah-pecah menjadi beberapa komponen kecil yang bisa digunakan berulang kali apabila dibutuhkan di kemudian hari. Kita bisa import komponen yang sudah dibuat tadi dari file lain dan di include kan seperti jika kita meng include kan elemen.
Sebagai contoh jika kita mempunya file Nested.svelte yang isinya seperti ini:
<p>This is another paragraph.</p> Maka kita bisa memasukkan komponen Nested dengan cara import seperti ini: <script> import Nested from './Nested.svelte'; </script> Nama elemen Nested bisa saja dirubah dengan nama lain, jadi nama ini tidak berhubungan dengan nama file nya (tapi akan jadi kebiasaan yang lebih baik jika dinamakan sama saja dengan nama file nya, supaya tidak bingung sendiri begitu maksudnya). Kemudian jika mau menggunakan tinggal gunakan dengan cara yang sama seperti menggunakan tag HTML pada umumnya. <p>This is a paragraph.</p> <!-- html normal -->
<Nested/> <!-- tag buatan sendiri --> Perhatikan meskipun kedua <p> dan <Nested> sebenarnya sama2 menggunakan tag <p>, tapi style masing2 tidak akan saling mempengaruhi, karena sekarang mereka sudah dianggap sebagai komponen yang berbeda. Satu lagi yang harus diingat, nama komponen buatanmu sifatnya case sensitive, jadi <Nested> tidak sama dengan <nested>
Unescaping tag HTML
Biasanya, string akan dianggap sebagai plain text, jadi jika di dalam string itu ada karakter seperti < dan > maka tidak akan dianggap sebagai sesuatu yang istimewa. Tapi kadang kita memang ingin menganggapnya sebagai HTML dan memasukkan langsung ke dalam komponen. Sebagai contoh kata-kata yang dimasukkan mengandung tag <strong>, supaya tulisan jadi bold.
<script> let str = `string contains <strong>HTML!!!</strong>`; </script> Maka daripada memasukkan variabel seperti biasa dengan kurung kurawal: <p>{str}</p>
Di svelte kita bisa melakukan dengan tag {@html ...} seperti ini, maka tulisan akan mengandung bold di bagian yang ada tag <strong>:
Framework Benchmark 18 is out (half year after previous result), the shocking result that Vert.x version of Javascript just killing almost everyone except Rust. Top performing programming languages for updating-database benchmark are: Rust, Java, Javascript, C++, C#, Go, Kotlin, Dart, Python.
For multiple-queries benchmark, the top performers are: Rust, Java, Javascript, C, Kotlin, C++, Clojure, Go, PHP, Perl, C#.
Rust is quite interesting, the only drawback that I found other than the syntax is the slow compile, it took nearly 6 seconds for even a minor changes (with Actix framework) in ramdisk to recompile, even with slow compile flags turned off.
Learning about Pony, a new (at least for me) programming language that designed to be elixir-python-golang like (imho), got me to this page:
It's interesting to see the memory usage of those language-framework, also Crystal, despite inability to utilize multicore still could perform as good as Golang's default muxer (which is not the best).
New benchmark result is out, as usual the important part is the data-update benchmark:
At that chart, the top ranking language are: Kotlin, C, Java, C++, Go, Perl, Javascript, Scala, C#; and for the database: MySQL, PostgreSQL, MongoDB.
Also the other benchmark that reflect real world case is multiple-queries:
On that benchmmark, the top performer programming language are: Dart, C++, Java, C, Go, Kotlin, Javascript, Scala, Ruby, and Ur; and the database: MongoDB, PostgreSQL, MySQL. You can see the previous result here, and here.
When you are so eager to use ES6 features but you know that most browsers not yet implement all ES6 features completely (that's why there are also HTML5 pollyfills). Here's the list of transpiler to convert Javascript ES6 to ES5:
Note that every transpilers (CoffeeScript, TypeScript, Elm, Haxe, etc) suffer the same problem: compile duration (hey, one more thing to do [=minify] before testing/deploying) and hard debugging (easier if you use source maps, only for JS transpilers, I don't know if these things exists for transpiler for other language). Still I wish for wAsm to come faster. Btw I learned ES6 just for react-native-web, otherwise I would always still stick with ES5.
After long wait, the latest Techempower Framework Benchmark 13 is out! And just like previous one, Go's fasthttp really really fast. As usual the most important thing is data updates benchmark:
Just now, I found a cool site to generate flowchart from source code (just like dot program):
(click for larger picture)
Anyway this just a joke, just like before (if programming language were religion/woman), may odds be in your favor..
Btw here's the code if you want to modify.. please use http://pastie.org if you want to do a long comment containing source code..
Choosing Programming language flowchart; if(I really really care about runtime performance) { if(I am masochist..) { if(I like Mozilla..) { Use Rust;rust-lang.org } else { Use C++;cplusplus.com } } else if(I don't want to learn something new..) { Use C;cprogramming.com } else if(I like long lines..) { Use Java;java.com } else if(I like FP?) { if(But I'm not masochist..) { Use Scala;scala-lang.org; } else if(I like parentheses..) { Use Clojure;clojure.org } else if(I like Microsoft) { Use FSharp;fsharp.org; } else { Use Haskell;haskell.org; } } else { if(I like Microsoft..) { if(I hate C++) { if(My computer is ancient..) { Use VB6; } else { Use VB.NET; } vbforums.com; } else { Use CSharp;csharp-station.com; } } else if(I like Facebook..) { Use Hack;hacklang.org; } else if(I like Apple..) { if(I'm a bit masochist..) { Use Objective-C;developer.apple.com; } else { Use Swift;swift-lang.org; } } else if(I like Google..) { if(But I also like java and javascript..) { Use Dart;dartlang.org; } else { Use Go;golang.org; } } else { // you can also use Lazarus // lazarus.freepascal.org Use Delphi;embarcadero.com; } } } else { if(I don't want to install a thing..) { if(I use linux, mac, or win 10) { Use Bash;bash-hackers.org; } else { Use Javascript;javascript.com; } } else if(I love spaghetti..) { if(I don't care about my future..) { // Most likely you will be killed by maintainer that reads your code.. Use Perl;perl.org; } else { Use PHP;php.net; } } else if(I want to make game mods..) { Use Lua;lua.org; } else if(I like indentations..) { Use Python;python.org; } else { Use Ruby;ruby-lang.org; } }
Aww snaps, I forgot to add Elixir, Julia, and Crystal -_- oh well.. maybe sometime in the future.
These data taken from https://github.com/kostya/benchmarks with some values removed, I only take the best result, and number of implementation is greater or equal to 3 (Comp, this could be the indicator how easy it's to implement). No further delay, here's the recap:
