The history of Model-View-Presenter

With modern web applications taking care of more and more system concerns as time progresses, we find ourselves looking for battle-hardened, proven practices that have stood the test of time.

Does it even makes sense to speak of software architecture for the front-end or is it a pipe dream? It turns out that the challenge of maintaining a complex front-end is a problem that was identified at least as early as the 1970s.

Join me, as we dust off the history books and discover the origins of the Model-View-Presenter design pattern from a modern web perspective.

#angular #model-view-presenter #model-view-controller #frameworks #design-patterns #software-architecture #history

What is GEEK

Buddha Community

The history of Model-View-Presenter

The history of Model-View-Presenter

With modern web applications taking care of more and more system concerns as time progresses, we find ourselves looking for battle-hardened, proven practices that have stood the test of time.

Does it even makes sense to speak of software architecture for the front-end or is it a pipe dream? It turns out that the challenge of maintaining a complex front-end is a problem that was identified at least as early as the 1970s.

Join me, as we dust off the history books and discover the origins of the Model-View-Presenter design pattern from a modern web perspective.

#angular #model-view-presenter #model-view-controller #frameworks #design-patterns #software-architecture #history

Percy  Ebert

Percy Ebert

1595237530

Model-View-Presenter with Angular

As an application grows, it becomes harder to maintain. The complexity increases while the value of reusable modules increases. We know that we have got to do something about it before we risk failure.

Design patterns to the rescue!

Complex applications#

complex application is characterised by at least one of these traits:

  • Multiple components in the component tree that display the same piece of the application state
  • Several sources of updates for the application state such as:

— Multiple users interacting at the same time

— Back-end systems that push updated state to the browser in real-time

— Scheduled background tasks

— Proximity sensors or other device sensors

  • Very frequent updating of the application state
  • A large amount of components
  • Components built with many lines of code, reminiscent of the Big Ball of Mud AngularJS controllers of the past
  • A high level of cyclomatic complexity in components — a high concentration of logical branches or async control flows

At the same time, we want an application that is maintainable, testable, scalable and performant.

Complex applications rarely have all of the valuable traits. We cannot avoid all of the complex traits and still meet advanced project requirements, but we can design our application to maximise its valuable traits.

Separation of concerns#

We can think of s_eparation of concerns_ (SoC) as compartmentalisation of our application. We group logic by system concern to be able to focus on a single concern at a time. At the topmost level, separation of concerns is an architectural discipline. In day to day development, it is knowing almost by heart exactly what goes where.

Example of horizontal layers in a modern web application. Figure from my talk “Model-View-Presenter with Angular” (slides).

We can slice our applications vertically, horizontally or both. When slicing vertically, we group software artifacts by feature. When slicing horizontally, we group by software layer. In our applications, we can categorise the software artifacts into these horizontal layers, or system concerns:

Horizontal layerExamplesBusiness logicApplication-specific logic, domain logic, validation rulesPersistenceWebStorage, IndexedDB, WebSQL, HTTP, WebSocket, GraphQL, Firebase, MeteorMessagingWebRTC, WebSocket, Push API, Server-Sent EventsI/OWeb Bluetooth, WebUSB, NFC, camera, microphone, proximity sensor, ambient light sensorPresentationDOM manipulation, event listeners, formattingUser interactionUI behaviour, form validationState managementApplication state management, application-specific events

view raw

web-application-horizontal-layers.csv hosted with ❤ by GitHub

Horizontal layers of a web application.

The same rule can be applied to our Angular components. They should only be concerned with the presentation and user interaction layers. The result is that we loosen the coupling between the moving parts of our systems.

Sure, this process requires a lot of discipline as we are adding additional layers of abstraction, but the end result’s valuable traits make up for this. Keep in mind that we are only creating abstractions that should have been there in the first place.​

#angular #software-architecture #design-patterns #model-view-presenter

Tierra  Zemlak

Tierra Zemlak

1592493840

Model-View-Presenter with Angular

As an application grows, it becomes harder to maintain. The complexity increases while the value of reusable modules increases. We know that we have got to do something about it before we risk failure.

Design patterns to the rescue!

#angular #software-architecture #design-patterns #model-view-presenter

Enos  Prosacco

Enos Prosacco

1598776206

History MCQs to Test Your History Knowledge

The beginning of the medieval period is ordinarily taken to be the moderate breakdown of the Gupta Empire from around 480 to 550, closure the “old style” period, just as “antiquated India”, albeit both these terms might be utilized for periods with broadly various dates, particularly in specific fields, for example, the historical backdrop of workmanship or religion. At any rate in northern India, there was no bigger state until maybe the Delhi Sultanate, or unquestionably the Mughal Empire. By 1413, the Tughlaq dynasty completely declined and the neighboring governor captured Delhi and this led to the start of the Sayyid Dynasty. In 1398, Timur attacked India and ransacked Indian riches. While returning back, he named Khizr Khan as the legislative head of Delhi.

#indian history tutorials #history mcqs #indian history mcqs #indian history quiz

Michael  Hamill

Michael Hamill

1617331277

Workshop Alert! Deep Learning Model Deployment & Management

The Association of Data Scientists (AdaSci), the premier global professional body of data science and ML practitioners, has announced a hands-on workshop on deep learning model deployment on February 6, Saturday.

Over the last few years, the applications of deep learning models have increased exponentially, with use cases ranging from automated driving, fraud detection, healthcare, voice assistants, machine translation and text generation.

Typically, when data scientists start machine learning model development, they mostly focus on the algorithms to use, feature engineering process, and hyperparameters to make the model more accurate. However, model deployment is the most critical step in the machine learning pipeline. As a matter of fact, models can only be beneficial to a business if deployed and managed correctly. Model deployment or management is probably the most under discussed topic.

In this workshop, the attendees get to learn about ML lifecycle, from gathering data to the deployment of models. Researchers and data scientists can build a pipeline to log and deploy machine learning models. Alongside, they will be able to learn about the challenges associated with machine learning models in production and handling different toolkits to track and monitor these models once deployed.

#hands on deep learning #machine learning model deployment #machine learning models #model deployment #model deployment workshop