Modern JavaScript and frontend frameworks for mobile applications
This article summarizes the second part of the frontend development notes for mobile web applications. The focus is on ES6 syntax, JavaScript libraries, repaint, redraw, reflow, templates and the role of frontend frameworks when an interface must work across desktop and mobile devices.
Why ES6 changed everyday JavaScript
ES6 made JavaScript easier to organize in real projects. Arrow functions reduce boilerplate and preserve the surrounding this context, let and const make scope more predictable, and classes give a familiar structure for components, services and reusable UI logic.
The practical consequence is not only cleaner syntax. It is easier to split a mobile web application into small pieces: data handling, rendering, event management and communication with APIs.
Repaint, redraw and reflow
Mobile interfaces are sensitive to unnecessary layout work. A reflow happens when the browser must calculate the geometry of elements again; a repaint happens when visual pixels change without necessarily changing layout. Too many DOM writes, layout reads or style recalculations can make an app feel slow.
- Group DOM writes instead of changing layout repeatedly.
- Avoid measuring layout immediately after changing styles.
- Prefer CSS transforms for animations when possible.
- Keep lists and repeated elements under control on small devices.
Templates and frontend frameworks
Templates allow the interface to be described from state rather than assembled manually with strings. Frameworks such as Angular add routing, dependency injection, build tooling, forms and component composition on top of that idea. For mobile applications, the important benefit is consistency: the same state should produce the same view regardless of screen size.
The trade-off is that a framework adds conventions. That is useful when the project grows, but it requires clear structure: routes, components, services, assets and metadata should be maintained as part of the application, not as isolated snippets.
Decision checklist
- Use plain JavaScript for very small widgets with little state.
- Use a framework when routing, reusable components and state coordination matter.
- Measure layout performance on real mobile devices, not only on desktop.
- Keep SEO in mind when the page is public: SSR, title, description and a single H1 still matter.