Bogdan Grădinariu – Logic and Style in Modern Web Apps
Summary
This paper is mainly about an improved and cleaner way to build the css architecture of a web application.
In a web environment, people tend to consider front-end work as simple lines of code that you don’t need to compile, you just write an alert box in an inline script, change a css padding after the backend is done with the redndering of the important information.
Well, this thing is changing, and since we’re not writing code as in year 2000, a need for structure appears in the front-end part.
I first started to write this presentation out of personal frustrations at one of my previous workplace. Everyone considered that they could change the appearance of the site at any time from everywere. In a very dynamic app that we built, there were widgets that were being animated with TweenMax, others that had some css3 transitions, things were toggled with jQuery and css classes at the same time and, of course, the “!important” keyword was present in almost every css file.
After that project, I held this presentation about how to separate the style from logic and things seemed to work differently (much better).
This separation is present in any programming paradigm, so why shouldn’t it apply to css and js too? Let css handle the visual part of the application while javascript handles the logic. It’s the basic principle – “separation of concerns” – that is a perfect match in the front-end development.
Duration
40 minutes
Detailed Schedule
I will hold the presentation in a free speech manner backed up by some code examples. I will reveal bad and good practices regarding css styling. I will give the attendees the opportunity to identify the good practices and to decide wheter or not my css approach is the way to go for them. This part will be discussed in detail at the end of the presentation, in the Q&A session, where both advantages and disadvantages of using this technique will be put on the table.
What you will learn?
- to be more organized
- to implement the separation of concerns paradigm in front-end too
- a modern approach to structure your css
Pre-requisites
- previous web-based work (not necessarily front-end)
- basic knowledge of css/js synthax & role
What’s next?
- usage of css states
- usage of css3 transition/animations instead of js based animations
Do the attendees need a laptop?
No
