CODEWITHSUNDEEP
web-frontend
Tanssy Zhang
Tanssy Zhang

Reputation: 29

What is design pattern in front-end development?

I was interviewed and asked this question. I am confused about the "design pattern" in the question. Does it mean the code executive process or the front-page layout of the design? Thanks!

Upvotes: 0

Views: 8349

Answers (3)

verNsíon1
verNsíon1

Reputation: 53

Seems to me the confusion was with front-end (software design context) as front page (graphic design context) .. design pattern... understandable misinterpretation of question.

e.g. the Mediator pattern (in the reference below) could be used (in front-end development) to act as a go-between (i.e. mediate) to facilitate communication/events between children of a user interface host element. Rather than children having to communicate with every other child separately, they all speak only to the host, which controls communication with all children.

See the Software Design Patterns reference: "Design Patterns: Elements of Reusable Object-Oriented Software" -'Gang of Four'

These patterns can be used to design/develop a User Interface, which is 'in front of the user'... so front-end development ...

Upvotes: 0

Jocelyn
Jocelyn

Reputation: 396

Design patterns are recurring solutions that solve Web development design problems and provide a common language for web developers who create user interfaces. In general, patterns do not specify requirements, but rather, present recommended solutions to design problems. They give generalized solutions in the form of templates that may be applied to real-world problems.

These are a few established and well-adopted design patterns examples in Bootstrap Responsive Web Design:

  • Fluid design: This is the most popular and easiest option for responsive design. In this pattern, larger screen multiple columns layout renders as a single column in a smaller screen in absolutely same sequence.
  • Column drop: In this pattern also, the page gets rendered in a single column; however, the order of blocks gets altered. That means, if a content block is visible first in order in case of a larger screen, that might be rendered as second or third in case of a smaller screen.
  • Layout shifter: This is a complex but powerful pattern where the whole layout of the screen contents gets altered in case of a smaller screen. This means that you need to develop different page layouts for large, medium, and small screens.

Upvotes: 3

user2864740
user2864740

Reputation: 61935

A "design pattern a general reusable solution to a commonly occurring problem within a given context"; different problems (and implementation) domains will yield to different design patterns. However, such refers to a solution and not a "visual pattern".

Some "design patterns" related to front-end work might be:

Upvotes: 0

Related Questions