This document summarizes the speaker's analogy between designing buildings and designing web applications. It outlines the step-by-step process of laying out a building with sketches, plans, and blueprints, and then draws parallels to laying out a web application by recognizing needs, setting plans, defining components, creating mock screens, and coding. The speaker emphasizes that just as you wouldn't build a house without detailed plans, you shouldn't build a web application without thorough planning and mockups to identify requirements and prevent issues.
2. about me
_Architectural Engineer by training
_Front-End Developer at Upstream (upstreamsystems.com)
_First encounter with Angular: Summer of 2015
_Lives in Athens, Greece
@psybercity
hiG
irly!
7. analogy
How designing buildings helped me design and -well- build software.
7
With a variety of structural elements.
Steady software
With a robust base.
And a well defined structure.
8. laying out a building
Task:
Make a community centre
_Which houses specific activities (theater, library, cafe, etc)
_No more than 500sq.m.
_Local Municipality guidelines (accessibility, appearance, branding)
_Quiet, family neighbourhood
8
problem/task
parameters
You start drawing.
10. laying out a building_plans
10
large scale finer scale
11. laying out a building_detailed blueprints
11
cross section of concrete slab cross section of concrete slab, concrete wall,
exterior and part of window
detail of window frame and shades
even finer scale
12. laying out a web application
Step by step!
__recognising the needs
__setting down the plans
__scaffolding
__defining components (structural elements)
__creating mock screens
__start coding!
12
13. laying out a web application_a web house
13
<building>
</building>
<chimney/>
<roof>
</roof>
<attic-window/>
<brick *ngFor="let brick of stack”/>
<wall>
</wall>
<insulation/>
<beam/><beam/>
<attic/>
<window>
<frame/>
<glazing/>
<handle/>
<apron/>
</window>
<door>
<frame/>
<handle/>
</door>
<column/><column/>
it’s a joke
14. laying out a web application_the step-by-step approach
digital portfolio
14
requirements:
_list of my projects.
_add a new project
_edit an existing one
_delete any embarrassing ones from first year in college
_any user, should be able to view details for each project
_user friendly (to attract future employers)
problem/task
parameters
You start drawing.
20. Now, let’s see some mock-ups
Disclaimer: This presentation is NOT about user interface / user experience design.
All elements are from the Material Design sticker sheet.
21. mock-ups/plans
Rough mock-up screens are put together
Initially, they can be just a laying out of elements, a draft to make sure nothing is left out
Large scale, no need for fine tuning and attention to detail just yet.
21
27. mock-ups/plans_lessons learned
Draft mock-up screens:
-reveal elements/components that we never thought were there
-help us plan out our code better
-keep us prepared and informed about what to expect
-reveal the need for a UI/UX designer
(just as you wouldn’t go about building a house without the plans,
or the architect)
27source: picpng.com
31. reasons why
What is helpful in this approach is:
_you plan your work in detail
_the planning makes a task easier
_it helps you have better estimates of how long anything is going to take
_it prevents you from unanticipated issues.
_scalable - easier to maintain - easier to change
Angular gives you he tools for that. So why not use them?
31
“the programmer has to grab a pen and paper and the planner has to write some code”
- Manolis
32. reasons why
32
“In the field of software development, the term build is similar to that of any other field.
That is, the construction of something that has an observable and tangible result.”
wikipedia: software build
33. recap
_There are skills in different industries that cross over
_Building design is a very old discipline
_The process of designing a building is very similar to that of designing an application
__you need drafts, detailed plans, structural elements, and a full, fine scaled blueprint
>these are the components that Angular gives you!<
You wouldn’t build your home without planning it out first. So, why do it with your homepage?
33
34. 34
Just remember, it’s not necessary to build software that actually looks like a building.
Or a group of buildings.
source: Jurassic Park (1993) Universal Pictures | fsn (file system navigator), SGI
