Jsli是个普通的青年，有一天爬山摔下山崖，意外发现了好几本秘籍JavaScript（简称JS）、html、css，里面记载了无数神奇的咒语。他勤奋好学，每天都在研习这些古老而又充满活力的语言，很快成了法力高强的魔法师。
Jsli家的房子被龙卷风吹没了，他急需一个避难所。抱着试一试的心态，他念起了HTML咒语，很快一个城堡的骨架就出来了，钢筋混合着水泥，很坚实的一座城堡。但是长得太丑了；于是他念起CSS咒语，很快城堡墙变成了紫色，多了许多华丽的装饰。但是这样的一个石头方法看着虽然华丽，却太无趣了。于是JSli念起js咒语，城堡的墙壁开始自由移动，样子也由方形、圆形、三角形变来变去。JSli手指onClik门，门就自动打开放起音乐，JSli终于满意了。
但是当无家可归的邻居看到JSli的城堡，都纷纷央求JSli给他们建造一座，因为他们的需求都不一样，可把JSli累死了，要从html、css、js一个一个来，好累。有一天JSli突然想到，为什么我不能把这些城堡相同的部分提取出来，复用呢，而且有些城堡只需要改一块砖头，我没有必要把整个都拆掉重来，只需要比较它改动了哪块砖头，改动那一部分就好啦。而且这些咒语分开念太累了，何不把其他都合起来，直接在一块使用呢，于是JSli创造了新的秘籍，React，可以直接将城堡的屋顶、门廊、墙壁变成一块一块，需要的时候直接搬过去用就好。
城堡建了10来座之后，JSli突然发现他的小镇变得好丑，星罗棋布的乱七八糟风格各异的城堡。于是他苦思冥想想出了Umi这一集大成的指导书，这像建筑图纸一样的操作指南，帮助他更加高效地组织和构建整个小镇的布局。在小镇建设过程中，Jsli想要建造教堂，公园，可他没有经验，幸亏他发现了npm（Node Package Manager）这个秘密空间，秘密空间里有全球各个魔法师的魔法成果。他惊喜地发现了一个叫Webpack的工具，这套工具竟然可以将他新学的ES6语法转成js，并且能把小镇压缩成一个小块。
小镇里的其他居民住进了自己的城堡，开始按自己喜好添加各种东西，小白添加了个外放的大音响，严重扰民，JSli把这个音响去掉后，没想到小白的城堡塌陷了，JSli修了好半天。没想到小绿又按了个噗噗冒气的烟囱遭到了举报，JSli不堪其扰，想着怎么能快速将他们的的城堡恢复到变动之前。他咨询了好多人，学会了Git这项时空转移魔法，它可以把每一次对城堡改进的魔法痕迹都储存起来，随时可以回到过去的任何一个版本，或与其他魔法师共享研究成果。
最后，为了让世界各地的魔法师都能轻松访问小镇，Jsli还学习了如何驾驭Node.js这一神奇的飞毯。Node.js不仅能承载他在云端施展各种魔法，还能与底层魔法阵——也就是我们的计算机操作系统——紧密沟通，实现高性能的实时魔法体验。至于城堡的规模化生产和分发，Jsli找到了Docker这位智慧的容器大师。Docker能够将整个小镇变成一个便携式的魔法盒子，无论是山巅的法师塔还是海底的水晶宫，只需要释放出这个盒子里的镜像，就能瞬间复制出一模一样的魔法小镇。而Harbor则是这片大陆上最大的魔法镜像仓库，Jsli将自己的魔法小镇镜像上传到这里，其他魔法师只需一句简单的咒语，就能从Harbor仓库中召唤出Jsli精心打造的魔法小镇副本，共同探索和分享这份小镇的独特。如此一来，Jsli通过整合JavaScript、HTML、CSS、ES6、React、Umi、npm、Git、Webpack、Node.js、Docker以及镜像仓库Harbor等各项魔法力量，创造出了一个既强大又富有生命力的魔法世界。
