The presentation discusses the evolution of browsers, JavaScript, and frameworks. It argues that while frameworks provide useful features like data binding and routing, they can also lock developers into certain approaches. Reinventing the wheel with vanilla JavaScript is possible using browser APIs and standards like custom elements, attributes, events, and the History API. Programming directly with vanilla JavaScript ensures familiarity with underlying capabilities and flexibility to choose the best tools.

1. Let’s go Vanilla
Ran Wahle

2. A little about me
• Former ASP.NET WebForms developer
• Frontend Developer @Tikal
(and Phoenix Team here)
• Loves to do things on my own

3. Agenda
• The browsers and javascript evolution
• Libraries and frameworks
• DIY - Web components
• DIY - Routing

5. Why Frameworks / libraries?
Don’t reinvent the wheel
And…

6. What’s wrong
with framework?
Remember asp.net
webforms

7. What was asp.net
webforms?
• A tool for building applications, the same as
windows, but on the web.
• Every click event actually ran on the server
• Desktop app developers thought they can
become web developers

8. The Angular lesson
• The angular team have decided, around 2014, to
replace the entire framework
• The old (angular.js) framework were built on old
web standards
• Switch to different framework cost them their
hegemony

9. What a framework gives
us ?
• Template compiling
• Data binding
• Routing
• Server API calls
• Code structure
• (and more…)

10. Frameworks Vs
Platform

11. OK, but what can
you do with vanilla?
Actually,
everything

12. Vanilla JS image
gallery

13. Custom elements
• Define
• Attributes
• Events

14. DefinecustomElements.define('image-gallery',
ImageGallery, {extends: 'div'})
export default class ImageGallery extends HTMLDivElement {
}
customElements.define('image-gallery',
ImageGallery)
export default class ImageGallery extends HTMLElement {
}

15. Attributes
static get observedAttributes() {
return ['image-title', 'image-content', 'file-name']
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'image-content') {
if (this.imageElement) {
this.imageElement.setAttribute('src', newValue || '');
}
}
if (name === 'image-title') {
if (this.titleElement) {
this.titleElement.textContent = newValue;
}
}
}

16. Event
const imageClick = new CustomEvent('image-click')
this.onclick = () => this.dispatchEvent(imageClick)
imageElement.addEventListener('image-click',
() => this.displayDetailedImage(image));

17. File reading API
readFile() {
return new Promise(resolve => {
const reader = new FileReader();
reader.onload = fileRead => {
return (fileReadEvent => {
resolve(fileReadEvent.target.result);
})(fileRead);
}
reader.onerror = err => console.error('error reading file', err);
reader.readAsDataURL(this.imageFile);
})
}

18. Routing
• Prevent default behaviour on click event
• Use History pushstate
• Popstate event
• Routing parameters

19. Override onclick on the
anchor

20. Navigation
navigate(url) {
try {
url = url === '/' ? url : new URL(url).pathname;
} catch (err) {
throw Error(`Cannot construct url from ${url}`)
}
history.pushState(null, null, url);
this.currentSnapshot = this.routingSnapshotTreeBuilder.buildRouteTree(url);
this.routerOutlet.setAttribute('current-url', url);
}

21. Summary
We can do allot with frameworks and libraries, and we will still be able
to do so, however, getting locked on framework programming might
lead us to a deadlock even when simple problem occurs.
Programming with framework / library may help us to actually deliver
something. However, we need to be familiar with the browser API so
we can, at least, choose the right tools for us, In our dev process.

22. ‫وحتى‬‫ذلك‬‫الحين‬‫لكم‬‫مني‬‫أجمل‬‫تح‬‫ية‬
‫طابت‬‫أيامكم‬‫والى‬‫اللقاء‬