Wednesday, December 26, 2018

Fundamentals of Webassembly

I was reading more on the WebAssembly last week.wrote about JavaScript in the last post, I don't know whether I have given wrong feeling that we should not study JavaScript at all. I did not meant that.In fact we should study JavaScript to understand more on the internals and browser JS engines .

The only thing I meant , we are in need finding alternative ways for more robust/new languages to replace JS drawbacks.

Web Assembly + Rust can offer some of the replacement for JS drawbacks. read more https://webassembly.org/


I don't know I know good enough to write this post, but still writing..


How to start with Web Assembly + Rust:


You can read webassembly+ rust on  https://rustwasm.github.io/book/why-rust-and-webassembly.html


In Ubuntu Linux machine probably we need the below steps to run webassembly with rust:

1. You need Rust tool chain: rustc, rustup and Cargo   . read the below link for rust tool chain - https://www.rust-lang.org/tools/install


2. wasm-pack - is a one shop for building testing Rust+webassembly applications.
 read about wasm-pack here https://rustwasm.github.io/wasm-pack/installer/

  wasm-pack has prerequisite for  Rust and npm. Since we installed rust in the above step, we only need npm to install ( if you haven't installed)

npm is a package manager for JavaScript. You can install it from https://www.npmjs.com/get-npm


You can get a project template with following ..

Clone a project template with this command:

cargo generate --git https://github.com/rustwasm/wasm-pack-template

you can follow below steps from the document to start with it .. https://rustwasm.github.io/book/game-of-life/hello-world.html




How to access Document elements(DOM ) using Webassembly+Rust

We need wasm_bindgen and web_sys libraries to access the DOM elements with Rust. You can read more about web_sys here -https://rustwasm.github.io/wasm-bindgen/api/web_sys/






Code: lib.rs

extern crate wasm_bindgen;
extern crate web_sys;

mod utils;

use wasm_bindgen::prelude::*;

use wasm_bindgen::JsCast;
use web_sys::{Document, Element, HtmlElement, Window};


#[wasm_bindgen(start)]
pub fn run() {
    using_web_sys();
}


fn using_web_sys()-> Result<(),JsValue>{
use web_sys::console;

console::log_1(&"Hellowrld to console using websys".into());

let window = web_sys::window().expect("no global window exists");
let document = window.document().expect("no document  found");

let body  = document.body().expect("document should have a body");


let val = document.create_element("p")?;

    val.set_inner_html("Hello from 121Rust!");
val.set_attribute("id","p1");
body.append_child(&val);
        let element = document
.get_element_by_id("p2").expect("no p2 element found");

let element1 = document
.get_element_by_id("p1").expect("no p1 element found");


let att = element.text_content().expect("no element text found");

let att1 = element1.text_content().expect("no element text found");
console::log_1(&att.into());

console::log_1(&att1.into());
    Ok(())

}

cargo.toml:

[package]
name = "na-rust-web"
version = "0.1.0"
authors = ["naveen "]

[lib]
crate-type = ["cdylib", "rlib"]


[dependencies]
cfg-if = "0.1.2"
wasm-bindgen = "0.2.29"
#web-sys = { version = "0.3.6", features = ['console'] }

# The `console_error_panic_hook` crate provides better debugging of panics by
# logging them with `console.error`. This is great for development, but requires
# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
# code size when deploying.
console_error_panic_hook = { version = "0.1.1", optional = true }

# `wee_alloc` is a tiny allocator for wasm that is only ~1K in code size
# compared to the default allocator's ~10K. It is slower than the default
# allocator, however.
#
# Unfortunately, `wee_alloc` requires nightly Rust when targeting wasm for now.
wee_alloc = { version = "0.4.2", optional = true }

[dev-dependencies]
wasm-bindgen-test = "0.2.29"


[dependencies.web-sys]
version = "0.3.4"
features = [
  'Document',
  'Element',
  'HtmlElement',
  'Node',
  'Window',
  'console',
]
profile.release]
# Tell `rustc` to optimize for small code size.

opt-level = "s"




 











Monday, December 3, 2018

Fundamentals of JavaScript

Last weekend I went to "JavaScript Fundamentals" boot-camp . It was a good class and nice introduction  for people who are new to programming. But my goal was to refresh some of the basics of JavaScript that I haven't tried for long time and want to learn some new things in JavaScript.

Two interesting and new things I learned  from the class are :

1.  80 to 90% of the Internet/Website is running with JavaScript.  Leading browsers in the market ( IE,Mozilla,Google Chrome) can execute only 3 things ( HTML,CSS and JAVASCRIPT).

If you consider Web as language (Analogy), then we can consider  HTML = 'noun' , CSS = "style"  and JavaScript = "Verb". I am ok with this analogy .

All frameworks of other languages like  Django(python web framework) , React( JS framework), Ruby Rails are translating their native language to JS as the browser can  understand only Javascript/html/css.

2. It ( JS applications) can be easily vulnerable and exploited by the malicious  inputs . ( The instructor did not mention/told this ). It was a basic programming boot-camp, so I won't expect him to say this.

But when I saw some of the examples  mentioned are so scary !!!.







We can use "typeof" operator to restrict the input types . But its all on developer's head.

Some of the questions : How  "+" operator can work on number and string ?
It can pass anything to a function and function won't check the type and JS will return something(what ever it like) !!,  its fully developers responsibility to understand the inputs and validate the types of the input before passing.

I think, you can read through below links for more :

https://codeburst.io/top-10-javascript-errors-from-1000-projects-and-how-to-avoid-them-2956ce008437

https://www.pixelstech.net/article/1354210754-10-design-flaws-of-JavaScript

https://whydoesitsuck.com/why-does-javascript-suck/


But I believe, JavaScript is a highly paid programming language and a language still showing/have  deficiency of programmers because 80%t to 90% Websites are running with JS.

If you want to build some fancy and interactive web pages , you need javascript. because the browsers can understand only JavaScript.

That made me research a little bit on Web browser engines, looks like it was just a race for JavaScript engines from 2006 to 2010 between leading web browsers(Microsoft IE, Google Chrome, Opera,Mozilla) . Read more https://en.wikipedia.org/wiki/JavaScript_engine

Just because JavaScript was the only thing making websites interactive and fancy!!. (There would be  some other benefits why browser engines using JS engines). So whoever(browser) can execute the JS quick ,they are the best ( I believe this hold true even today). But serious drawbacks of JavaScript are ignored and that made the internet even worse.

We really need the web to be more secure and trusty , without compromising the performance( I am ok with compromising performance if we get security). So the point is, we really needed an alternative for JavaScript or something can write a good JS for us. Since the 80% of the Web is running with JS, the browsers are not going to switch to some other language engines quickly.

I am not sure how will be internals/architecture  of the browser in next  10 years .I wish there would be more type and memory safe languages engines and they should replace JS engines. People/developers should write those type and memory  safe languages for the browser engines.

I was reading through WebAssembly for last a few months.The JavaScript boot-camp was an eye-opening for me to read more on WebAssembly + Rust again because....


Why  Rust and Web Assembly ?

https://rustwasm.github.io/book/why-rust-and-webassembly.html



WebAssembly -  Its not compromising performance and allows to write type safe + memory safe low languages

Rust - Featuring
  • zero-cost abstractions
  • move semantics
  • guaranteed memory safety
  • threads without data races
  • trait-based generics
  • pattern matching
  • type inference
  • minimal runtime
  • efficient C bindings

But one thing even concerning me is web assembly compiling the C,C++ or Rust to JavaScript that eventually going to run in the browser.. so again JS is going to run in engines. Will this actually solve the JavaScript issues ? I am not sure.


Looking for your comments and thoughts!