diff --git a/_layouts/default.html b/_layouts/default.html index b0bf014e8a..ea1a914fa9 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -47,15 +47,13 @@ {% comment %} Only load analytics when on the main repo; it will fail to load on the forks {% endcomment %} {% if site.github.owner_name == 'ScottLogic' %} - + + + {% endif %} +{% if site.github.owner_name == 'ScottLogic' %} + + + +{% endif %}
{% include site-header.html %} {{ content }} @@ -79,7 +83,6 @@ {% if page.paginated %} diff --git a/_posts/2024-01-03-a-journey-into-wasm.md b/_posts/2024-01-03-a-journey-into-wasm.md new file mode 100644 index 0000000000..f2ad36377b --- /dev/null +++ b/_posts/2024-01-03-a-journey-into-wasm.md @@ -0,0 +1,115 @@ +--- +title: A Journey into Wasm +date: 2024-01-03 09:00:00 Z +categories: +- Tech +tags: +- Wasm +- Rust +- AdventOfCode +summary: A brief look into building out a NextJS application which makes use WebAssembly + to solve Advent Of Code puzzles in the browser. +author: dogle +image: "/uploads/Wasm%20thumbnail.png" +--- + +## Overview + +I recently has some downtime and decided to spend it looking into [Web Assembly](https://webassembly.org/) or Wasm. It's something I've heard of on and off over the last few years but never really understood very well. Getting started, my understanding initially, was that Wasm was a way to use languages other than JavaScript in the browser. I'd also noted that the [Rust programming language](https://www.rust-lang.org/) seemed to be a popular choice for working with Wasm and that was something else I was keen to have a play with. With this in mind I set about creating an exploration project, the goal of which would be to write a program in Rust and get it to run in the browser. + +## Take One + +After a quick hunt about on the web I decided to try and follow [this](https://rustwasm.github.io/docs/book/game-of-life/introduction.html) tutorial for implementing Conway's Game of Life in Rust and WebAssembly. I followed the step by step guide and with a bit of tweaking to handle updates in WebPack since the guide was published, I was able to get it working. If you're interested the results are [here](https://github.com/dogle-scottlogic/RustTutorial/tree/main/wasm-game-of-life). + +![Game of Life]({{ site.github.url }}/dogle/assets/wasm-and-rust/conway_gol.png) + +I was however left feeling a bit dissatisfied with the results of this exercise. + +Firstly, I didn't feel I had learned much about Rust aside from a general overview of it being a low level language, much like C++. As I was following a tutorial, most of the coding was a copy exercise rather than having to solve any problems for myself. + +Secondly, the integration with JavaScript didn't feel very nice. In the tutorial the web part of the code is nested within the overall project and references the Wasm package one level up. This means the Rust and JavaScript code feels quite tightly coupled. The example uses a simple WebPack build using an `index.html` file which contains the HTML, CSS and link out to the `index.js` file via a `bootstrap.js` wrapper file. The `index.js` file houses all the logic for importing the Wasm file and attaching handlers to buttons etc. The results are effective but doesn't feel very extensible or easy to maintain. I couldn't help but feel it would be nicer to swap the UI side of things out to use a framework such as React or Angular. When I tried to integrate my Wasm file with [Svelte](https://svelte.dev/) however I hit a lot of issues and ultimately abandoned that approach. + +Lastly, and maybe most importantly, I still wasn't sure I really understood the value of Wasm in general. Sure, I was able to gain more control over things like memory allocation through the use of Rust, but it felt like a use case I wouldn't really come across much in day to day work. + +## Learning + +I decided to tackle the last of these things first. Web Assembly still felt a lot like hype to me, rather than something I would get any practical use out of so I had a listen to [this](https://blog.scottlogic.com/2023/08/04/beyond-the-hype-webassembly.html) great episode of Beyond the Hype to see what the consensus what among those who knew a lot more than me on this topic. + +I think the "ah-ha" moment for me came when Sean Isom was talking about the potential of moving things like Adobe Photoshop into the browser. That is that WASM could be used to allow, among other things, + +- Moving pr-existing codebases into the web without the need to rewrite in JavaScript. +- Move large codebases into the web which wouldn't be possible to rewrite in JavaScript. +- Allow publishing of library packages that can be written in the most appropriate language and easily consumed by web applications. + +## Take Two + +I decided to give this another go, this time stepping away from the tutorial and going it alone. I had recently been working on this years [Advent of Code](https://adventofcode.com/), so I decided to try and solve a few of the challenges in Rust and then integrate it into a Frontend framework like [NextJS](https://nextjs.org/). + +This time things went a little better. Firstly, as I was no longer following a tutorial, I was forced to start learning Rust a little deeper in order to translate what I wanted to do into valid Rust syntax. + +Once I was happy I'd got a solution for both parts of [Day one](https://adventofcode.com/2016/day/1) I then moved on to compiling the Rust code to Wasm. Leaning on what I'd learnt from the Game of Life tutorial I used [wasm_bindgen](https://github.com/rustwasm/wasm-bindgen) with my `lib.rs` file which creates an api exposing two JavaScript functions, one for each of the parts of the puzzle. The functions take a string as an input and return the solution as a number. + +~~~rust +mod day_one; + +use wasm_bindgen::prelude::*; + +#[wasm_bindgen] +pub fn day_one_part_one(input: String) -> i32 { + return day_one::solve_part_one(input); +} +~~~ + +I then published the Wasm to NPM as a [package](https://www.npmjs.com/package/advent_of_rust) that I could consume from a JavaScript application. + +Next up I needed to build something to consume the package I had created. For this I turned to NextJS. I used the [quick start](https://nextjs.org/docs/getting-started/installation) to bootstrap a simple app with TypeScript and ESLint installed. This handled all the setup for me and I immediately had a working web app up and running on port 3000. After stripping out everything I didn't need I was ready to import my Wasm file. + +I added my `advent_of_rust` package to the dependency to my package.json + +~~~json +"dependencies": { + "react": "^18", + "react-dom": "^18", + "next": "14.0.4", + "advent_of_rust": "0.2.2" + }, +~~~ + +and then created a `useEffect` hook that would import the wasm module when the page first loads. + +~~~typescript +useEffect(() => { + // Load and instantiate the Wasm module from the CDN + const wasmModule = import("advent_of_rust"); + + wasmModule.then((module) => { + // Use exported functions from the Wasm module + setModule(module); + }); +}, []); +~~~ + +The last bit of the puzzle was enabling the experimental feature flag for asyncWebAssembly in WebPack. + +~~~javascript +module.exports = { + reactStrictMode: true, + webpack: function (config, options) { + config.experiments = { asyncWebAssembly: true, layers: true }; + return config; + }, +}; +~~~ + +After this I was able to add an Input element to allow upload of a text file containing the input for a puzzle and then a couple of buttons for solving parts one and two. When pressed the code would pass the input as a string to the exposed function for the relevant part and then display whatever result was returned. A bit of CSS and it was done. + +To make sure I was confident in the process I moved on to solving [day Two](https://adventofcode.com/2016/day/2). I then needed to rebuild and publish a new version of the Wasm to expose the two new functions I'd added. Back in NextJS land I then bumped the version in the `package.json` and updated my code so that a user was able to select which day to solve in the UI. + +![Advent of Rust]({{ site.github.url }}/dogle/assets/wasm-and-rust/aor.png) + +## Conclusion + +All told this felt a lot better and I had created something a lot closer to my original goal. The NextJS React App was now responsible only for the UI and allowed me to quickly build out a single page application that could easily be extended and tested with linting, routing and TypeScript built in. All the heavy lifting logic for solving the puzzles was delegated to the Rust code and this code was neatly compiled to a Wasm file and published in NPM, meaning all my React App had to do was add it to the dependency list and pull it in when the page loads. The Rust code can be easily updated and published independently of the UI code and vice versa. I could potentially also build out new applications with other frameworks and consume the same package. +There's some tidy up that would be nice to do of course but in general I feel this has been an interesting and helpful journey into Wasm and I hope it was interesting for you too. + +The GitHub code for this project can be found [here](https://github.com/dogle-scottlogic/adventOfRust/tree/main). diff --git a/_uploads/Wasm thumbnail.png b/_uploads/Wasm thumbnail.png new file mode 100644 index 0000000000..99b64c6456 Binary files /dev/null and b/_uploads/Wasm thumbnail.png differ diff --git a/dogle/assets/wasm-and-rust/aor.png b/dogle/assets/wasm-and-rust/aor.png new file mode 100644 index 0000000000..29709393a7 Binary files /dev/null and b/dogle/assets/wasm-and-rust/aor.png differ diff --git a/dogle/assets/wasm-and-rust/conway_gol.png b/dogle/assets/wasm-and-rust/conway_gol.png new file mode 100644 index 0000000000..a84c73932d Binary files /dev/null and b/dogle/assets/wasm-and-rust/conway_gol.png differ diff --git a/package.json b/package.json index ad42fe9e13..6a29428a99 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "remove-unused-images": "node scripts/images/remove-images.js", "spellcheck": "mdspell \"**/ceberhardt/_posts/*.md\" --en-gb -a -n -x -t", "style": "sass --no-source-map --style=compressed scss/style.scss style.css", - "scripts": "uglifyjs scripts/initialise-menu.js scripts/jquery-1.9.1.js scripts/jquery.jscroll-2.2.4.js scripts/load-clap-count.js scripts/elapsed.js scripts/graft-studio/header-scroll.js scripts/graft-studio/jquery.mmenu.all.js scripts/graft-studio/jquery.matchHeight.js scripts/load-google-tag-manager.js node_modules/applause-button/dist/applause-button.js node_modules/cookieconsent/build/cookieconsent.min.js -o script.js" + "scripts": "uglifyjs scripts/initialise-menu.js scripts/jquery-1.9.1.js scripts/jquery.jscroll-2.2.4.js scripts/load-clap-count.js scripts/elapsed.js scripts/graft-studio/header-scroll.js scripts/graft-studio/jquery.mmenu.all.js scripts/graft-studio/jquery.matchHeight.js node_modules/applause-button/dist/applause-button.js node_modules/cookieconsent/build/cookieconsent.min.js -o script.js" }, "homepage": "http://blog.scottlogic.com", "private": true diff --git a/script.js b/script.js index d7b70b0ba2..c4dbe74725 100644 --- a/script.js +++ b/script.js @@ -4,6 +4,6 @@ function initialiseMenu(){jQuery(document).ready(function(){var $menu=jQuery("#m var destElements,node,clone,i,srcElements,inPage=jQuery.contains(elem.ownerDocument,elem);if(jQuery.support.html5Clone||jQuery.isXMLDoc(elem)||!rnoshimcache.test("<"+elem.nodeName+">")){clone=elem.cloneNode(true)}else{fragmentDiv.innerHTML=elem.outerHTML;fragmentDiv.removeChild(clone=fragmentDiv.firstChild)}if((!jQuery.support.noCloneEvent||!jQuery.support.noCloneChecked)&&(elem.nodeType===1||elem.nodeType===11)&&!jQuery.isXMLDoc(elem)){destElements=getAll(clone);srcElements=getAll(elem);for(i=0;(node=srcElements[i])!=null;++i){if(destElements[i]){fixCloneNodeIssues(node,destElements[i])}}}if(dataAndEvents){if(deepDataAndEvents){srcElements=srcElements||getAll(elem);destElements=destElements||getAll(clone);for(i=0;(node=srcElements[i])!=null;i++){cloneCopyEvent(node,destElements[i])}}else{cloneCopyEvent(elem,clone)}}destElements=getAll(clone,"script");if(destElements.length>0){setGlobalEval(destElements,!inPage&&getAll(elem,"script"))}destElements=srcElements=node=null;return clone},buildFragment:function(elems,context,scripts,selection){var j,elem,contains,tmp,tag,tbody,wrap,l=elems.length,safe=createSafeFragment(context),nodes=[],i=0;for(;i")+wrap[2];j=wrap[0];while(j--){tmp=tmp.lastChild}if(!jQuery.support.leadingWhitespace&&rleadingWhitespace.test(elem)){nodes.push(context.createTextNode(rleadingWhitespace.exec(elem)[0]))}if(!jQuery.support.tbody){elem=tag==="table"&&!rtbody.test(elem)?tmp.firstChild:wrap[1]===""&&!rtbody.test(elem)?tmp:0;j=elem&&elem.childNodes.length;while(j--){if(jQuery.nodeName(tbody=elem.childNodes[j],"tbody")&&!tbody.childNodes.length){elem.removeChild(tbody)}}}jQuery.merge(nodes,tmp.childNodes);tmp.textContent="";while(tmp.firstChild){tmp.removeChild(tmp.firstChild)}tmp=safe.lastChild}}}if(tmp){safe.removeChild(tmp)}if(!jQuery.support.appendChecked){jQuery.grep(getAll(nodes,"input"),fixDefaultChecked)}i=0;while(elem=nodes[i++]){if(selection&&jQuery.inArray(elem,selection)!==-1){continue}contains=jQuery.contains(elem.ownerDocument,elem);tmp=getAll(safe.appendChild(elem),"script");if(contains){setGlobalEval(tmp)}if(scripts){j=0;while(elem=tmp[j++]){if(rscriptType.test(elem.type||"")){scripts.push(elem)}}}}tmp=null;return safe},cleanData:function(elems,acceptData){var elem,type,id,data,i=0,internalKey=jQuery.expando,cache=jQuery.cache,deleteExpando=jQuery.support.deleteExpando,special=jQuery.event.special;for(;(elem=elems[i])!=null;i++){if(acceptData||jQuery.acceptData(elem)){id=elem[internalKey];data=id&&cache[id];if(data){if(data.events){for(type in data.events){if(special[type]){jQuery.event.remove(elem,type)}else{jQuery.removeEvent(elem,type,data.handle)}}}if(cache[id]){delete cache[id];if(deleteExpando){delete elem[internalKey]}else if(typeof elem.removeAttribute!==core_strundefined){elem.removeAttribute(internalKey)}else{elem[internalKey]=null}core_deletedIds.push(id)}}}}}});var iframe,getStyles,curCSS,ralpha=/alpha\([^)]*\)/i,ropacity=/opacity\s*=\s*([^)]*)/,rposition=/^(top|right|bottom|left)$/,rdisplayswap=/^(none|table(?!-c[ea]).+)/,rmargin=/^margin/,rnumsplit=new RegExp("^("+core_pnum+")(.*)$","i"),rnumnonpx=new RegExp("^("+core_pnum+")(?!px)[a-z%]+$","i"),rrelNum=new RegExp("^([+-])=("+core_pnum+")","i"),elemdisplay={BODY:"block"},cssShow={position:"absolute",visibility:"hidden",display:"block"},cssNormalTransform={letterSpacing:0,fontWeight:400},cssExpand=["Top","Right","Bottom","Left"],cssPrefixes=["Webkit","O","Moz","ms"];function vendorPropName(style,name){if(name in style){return name}var capName=name.charAt(0).toUpperCase()+name.slice(1),origName=name,i=cssPrefixes.length;while(i--){name=cssPrefixes[i]+capName;if(name in style){return name}}return origName}function isHidden(elem,el){elem=el||elem;return jQuery.css(elem,"display")==="none"||!jQuery.contains(elem.ownerDocument,elem)}function showHide(elements,show){var display,elem,hidden,values=[],index=0,length=elements.length;for(;index1)},show:function(){return showHide(this,true)},hide:function(){return showHide(this)},toggle:function(state){var bool=typeof state==="boolean";return this.each(function(){if(bool?state:isHidden(this)){jQuery(this).show()}else{jQuery(this).hide()}})}});jQuery.extend({cssHooks:{opacity:{get:function(elem,computed){if(computed){var ret=curCSS(elem,"opacity");return ret===""?"1":ret}}}},cssNumber:{columnCount:true,fillOpacity:true,fontWeight:true,lineHeight:true,opacity:true,orphans:true,widows:true,zIndex:true,zoom:true},cssProps:{float:jQuery.support.cssFloat?"cssFloat":"styleFloat"},style:function(elem,name,value,extra){if(!elem||elem.nodeType===3||elem.nodeType===8||!elem.style){return}var ret,type,hooks,origName=jQuery.camelCase(name),style=elem.style;name=jQuery.cssProps[origName]||(jQuery.cssProps[origName]=vendorPropName(style,origName));hooks=jQuery.cssHooks[name]||jQuery.cssHooks[origName];if(value!==undefined){type=typeof value;if(type==="string"&&(ret=rrelNum.exec(value))){value=(ret[1]+1)*ret[2]+parseFloat(jQuery.css(elem,name));type="number"}if(value==null||type==="number"&&isNaN(value)){return}if(type==="number"&&!jQuery.cssNumber[origName]){value+="px"}if(!jQuery.support.clearCloneStyle&&value===""&&name.indexOf("background")===0){style[name]="inherit"}if(!hooks||!("set"in hooks)||(value=hooks.set(elem,value,extra))!==undefined){try{style[name]=value}catch(e){}}}else{if(hooks&&"get"in hooks&&(ret=hooks.get(elem,false,extra))!==undefined){return ret}return style[name]}},css:function(elem,name,extra,styles){var num,val,hooks,origName=jQuery.camelCase(name);name=jQuery.cssProps[origName]||(jQuery.cssProps[origName]=vendorPropName(elem.style,origName));hooks=jQuery.cssHooks[name]||jQuery.cssHooks[origName];if(hooks&&"get"in hooks){val=hooks.get(elem,true,extra)}if(val===undefined){val=curCSS(elem,name,styles)}if(val==="normal"&&name in cssNormalTransform){val=cssNormalTransform[name]}if(extra===""||extra){num=parseFloat(val);return extra===true||jQuery.isNumeric(num)?num||0:val}return val},swap:function(elem,options,callback,args){var ret,name,old={};for(name in options){old[name]=elem.style[name];elem.style[name]=options[name]}ret=callback.apply(elem,args||[]);for(name in options){elem.style[name]=old[name]}return ret}});if(window.getComputedStyle){getStyles=function(elem){return window.getComputedStyle(elem,null)};curCSS=function(elem,name,_computed){var width,minWidth,maxWidth,computed=_computed||getStyles(elem),ret=computed?computed.getPropertyValue(name)||computed[name]:undefined,style=elem.style;if(computed){if(ret===""&&!jQuery.contains(elem.ownerDocument,elem)){ret=jQuery.style(elem,name)}if(rnumnonpx.test(ret)&&rmargin.test(name)){width=style.width;minWidth=style.minWidth;maxWidth=style.maxWidth;style.minWidth=style.maxWidth=style.width=ret;ret=computed.width;style.width=width;style.minWidth=minWidth;style.maxWidth=maxWidth}}return ret}}else if(document.documentElement.currentStyle){getStyles=function(elem){return elem.currentStyle};curCSS=function(elem,name,_computed){var left,rs,rsLeft,computed=_computed||getStyles(elem),ret=computed?computed[name]:undefined,style=elem.style;if(ret==null&&style&&style[name]){ret=style[name]}if(rnumnonpx.test(ret)&&!rposition.test(name)){left=style.left;rs=elem.runtimeStyle;rsLeft=rs&&rs.left;if(rsLeft){rs.left=elem.currentStyle.left}style.left=name==="fontSize"?"1em":ret;ret=style.pixelLeft+"px";style.left=left;if(rsLeft){rs.left=rsLeft}}return ret===""?"auto":ret}}function setPositiveNumber(elem,value,subtract){var matches=rnumsplit.exec(value);return matches?Math.max(0,matches[1]-(subtract||0))+(matches[2]||"px"):value}function augmentWidthOrHeight(elem,name,extra,isBorderBox,styles){var i=extra===(isBorderBox?"border":"content")?4:name==="width"?1:0,val=0;for(;i<4;i+=2){if(extra==="margin"){val+=jQuery.css(elem,extra+cssExpand[i],true,styles)}if(isBorderBox){if(extra==="content"){val-=jQuery.css(elem,"padding"+cssExpand[i],true,styles)}if(extra!=="margin"){val-=jQuery.css(elem,"border"+cssExpand[i]+"Width",true,styles)}}else{val+=jQuery.css(elem,"padding"+cssExpand[i],true,styles);if(extra!=="padding"){val+=jQuery.css(elem,"border"+cssExpand[i]+"Width",true,styles)}}}return val}function getWidthOrHeight(elem,name,extra){var valueIsBorderBox=true,val=name==="width"?elem.offsetWidth:elem.offsetHeight,styles=getStyles(elem),isBorderBox=jQuery.support.boxSizing&&jQuery.css(elem,"boxSizing",false,styles)==="border-box";if(val<=0||val==null){val=curCSS(elem,name,styles);if(val<0||val==null){val=elem.style[name]}if(rnumnonpx.test(val)){return val}valueIsBorderBox=isBorderBox&&(jQuery.support.boxSizingReliable||val===elem.style[name]);val=parseFloat(val)||0}return val+augmentWidthOrHeight(elem,name,extra||(isBorderBox?"border":"content"),valueIsBorderBox,styles)+"px"}function css_defaultDisplay(nodeName){var doc=document,display=elemdisplay[nodeName];if(!display){display=actualDisplay(nodeName,doc);if(display==="none"||!display){iframe=(iframe||jQuery("