wk is a CLI tool for developing single-page-applications with web components syntax.
This CLI has 6 simple commands that is sufficient to
This CLI tool is available through npm.
npm i -g wk-toolkit
This is an experimental build tool that I use in my own projects, and I don't expect anyone to find this useful and use in their own work.
I have prepared this document for those who really dislikes modern web development and looking for an alternative approach to build web applications.
Since I am biased against modern methods of web development, I tried to get rid of all unnecessary (IMO) frameworks, transpilers, task runners, dependency managers as much as possible and implemented some of their functionality in this CLI in a very minimal way.
Here are the list of the most radical decisions in this web application development method that can show you if this CLI is a good fit for you or not.
Despite writing more code, imperative programming is easier to debug and has less hidden behaviour. Not having the full control on rendering makes trivial problems like 'preventing redundant re-renders' a big issueand forces you to either learn the internals of the declarative rendering logic or blindly follow the constantly-changing-best-practice for that specific problem.
Wk also tries to keep markup and logic separated which is impossible for declerative UI programming. Mixing markup and logic requires you to invent a new language or a new syntax (eg: directives in angular/vue and jsx in react). HTML/JS/CSS are already very high level and powerful concepts and adding another language and there is no need to learn a new programming or markup language ..
Methods like data binding, virtual DOM are not used in projects developed with wk. Those concepts introduces lots of complexity and mostly ends up writing more code than their Hence all dom manipulation is done manually with using methods and properties like querySelector, cloneNode and , innerHTML. In order to develop web apps with this tool you must be proficient with standart Web APIs and manual DOM manipulation techniques.
documentation is not complete
A freshly initialized project will have following 5 files
./src/components/web-app/web-app.html ./src/components/web-app/web-app.css ./src/components/web-app/web-app.js ./public/index.html ./jsconfig.json
every folder put into components folder counts as one component and every component folder must have one js,css and html file in it.So web-app.js, web-app.css and web-app.html are necessary for the web-app component
web-app component is the prime component of a wk project and entry point for the program is the first line of web-app.js
you can create a new component by creating the folder and necessary 3 files or you can just use wk new component-name command
with wk start command, these these js, css and html files are merged and served via an http server built into CLI tool
dont serve the base project folder or public folder yourself for development always use wk start command for development
main document of the web application is ./public/index.html, you can include 3rd party scripts/css in it
all assets and 3rd party js/css files should be stored in ./public folder
if you would like to make a production build use wk build command, it will copy all your assets in ./public folder and minify all your source code into a new folder ./build. you can move content of this build folder to any http file server to serve your application
projects written with wk are encouraged to use following style guide
wk is in under active development since 2018 and i have made lots of breaking changes to it, below is the track of all those changes
unfortunately there is no foreseeable date for stable version release yet
folder structure is changed with this release (this is a breaking change)
www is changed to public since this folder is for serving static files, i thought it would be a good idea to name it www/, (just like default apache root folder name) but no one get the reference and i decided to change its name to public/ which is inspired from create-react-app
src is kept same src is a good abbrevetion for name 'source' so i kept it as it is
com is moved under src and renamed as src/components
folder name 'com' has an undesired resemblance with Android package names ( eg: com.foo.bar ) i thought having 3 letter base folder names looked cool ( www, src, com) but every developer that tried to use wk, complained with these cryptic namings.
i have decided to make a breaking change to wk and dropped typescript support
even though i love typescript and typed languages for programming, i had some negative experiences with 'typescript' so far
still, i am not convinced that dropping typescript is a good idea, since wk is still in an experimental stage, i may re-introduce typescript in the future