Let’s start with the basics.
What’s Frontend engineering?
Without the “In a galaxy far far away…” it started as HTML/XML to be interpreted by a browser. However, over time Brenden Eich (Now with Brave Software) developed Javascript and it has become an ingredient across the entire technology stack (i.e. Node.js). Hence the word “FullStack” was developed. A FullStack developer could code the front-end, back-end, API, and database but not always visual design, interaction design, and CSS. Instead of discussing the entire stack we’ll focus on the notion of Frontend engineering. With customer-centric models, this “Frontend” becomes more about devices and interaction methods than “browsers”.
Development teams already have frameworks that address code efficiencies between their desktop and mobile browser efforts. Responsive sites most solved this with CSS and Javascript but React entered as a way to unite mobile app (iOS/Android) around the same codebase as web.
Essentially we are managing documents in browsers and this requires an understanding of the DOM. What’s a DOM? Simply stated, the DOM is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. But as a Frontend developer, you have to THINK BEYOND THE DOM.
Touchpoints: The NEW Frontend
Conversational interfaces – Chat, Voice(AMZ -Alexa, Apple-SIRI)
Why Frontend Matters? The value of Frontend lies in the speed of engagement by the customer/user. Optimization and efficiency are increasing the focus of developers and designers of experiences.
Evolutionary Forces On The Frontend
Code Performance (speed) – DevOps – Data/Analytics – Focusing the rise of data lakes and data on itself, the Frontend efforts will work towards ways to make the application lighter and more intelligent in showing, grouping and filtering the right information without overloading the hardware, browser, etc.
Welcome the rise of machine learning and AI in the Frontend development framework. With many devices now including AI/ML optimized chips and SDKs in their devices, Frontend developers need to include this into their toolkits. Using AI-supported in-app & on website behavior analysis of end consumers. We will have insight into the deep psychology of real-time experiences. What color triggers more excitement, what button animation triggers more dopamine, etc. The Frontend world will definitely become more fine-tuned to our psychological “needs” in our to manipulate the end consumer to … consume. “Affective” (Affectiva) computing will adapt the Frontend to the viewer or customer’s mood.
Frontend in VR & AR
Frontend engineering will play a crucial role in AR and VR. This area brings a whole new set of challenges with itself. The user does not use a mouse or a keyboard. Like voice, the interaction is “screen-based”. React VR (e.g. React 360) or something like that. Which would allow you do design 360 User Interfaces consistent with React used in other touchpoints? “Device-Awareness” is critical to the optimal Frontend experience. Development teams could create transparent overlay User Interfaces to allow the user to use your app while they are interacting with their environment (AR).
CODE FUTURES
Today, with the continuing evolution of responsive design and convergence of code for all touchpoints across web/mobile/kiosks, React along with GraphQL (API) continues to be the largest wave. However, with the rise of Web 3.0, WebAssemby is making waves as decentralized apps and blockchain technologies continue to develop. Don’t forget smart contract languages too like Ethereum’s Solidity.
Let’s look at the general architecture of Frontend web development frameworks, databases, state management, relationships between frameworks, reception and ease of use, languages that compile to JavaScript, mobile frameworks, build tools, JavaScript testing tools, and a whole lot more. Monitoring and testing these Frontend frameworks has become better. Frontend application monitoring solution lets you replay problems as if they happened in your own browser logging Redux actions and state. An example of a tool like this is: LogRocket. LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
The Road Ahead – PERSONALIZED Frontends
The key takeaways from the future of Frontend engineering is that it’s moving fast and going beyond website and mobile/phone apps. We are seeing rapid developments in conversational (Chat) interfaces that are driven through Instagram or Social platforms. Coupled with voice, a Frontend engineer needs to learn NLP and Machine Learning in order to adapt their toolkit to address the requirements in the moment of interaction. They need to understand how to customize and personalize in real-time the engagement of the user/customer. Watch React and other code frameworks like WebAssemby that build stand-alone applications for Web 3.0 but keep measuring the performance of your solution to the problem of engagement.