Slajdy o tom jakou vlastníme UI knihovnu v Jobs.cz teamu ve firmě LMC. Přednáška na Frontendisti.cz 27.1.2016 v Node5.

1. JobsUI
www.jobs.cz/ui
@Krejcek martin.kristof@lmc.eu

3. Proč máme vlastní
UI knihovnu?

4. Naučitelnost

5. Znovupoužitelnost

6. Přehlednost

7. Kooperace při návrhu s UX

8. Čistota kódu

9. Konzistence

10. Rozdělení JobsUI

11. Layout
• Color palette;
• floats;
• accessibility;
• horizontal separator;
• spacing classes;
• …

12. Typography
• Headings and paragraphs;
• links;
• lists;
• icons (icon font).

13. Forms
• Form basic components (input, checkbox, select);
• button;
• select filter;
• dropdown;
• tagselect;
• …

14. Components
• Tags;
• breadcrumbs;
• label;
• image;
• progress bar
• …

15. Compositions
• Pager;
• listing;
• modal;
• tabs;
• table;
• combobox;
• picker.

16. Jak se s JobsUI pracuje?

18. Jak probíhá přidávání nové
komponenty do knihovny?

19. Vytvoření prototypu

20. Implementace
Název komponenty
Dokumentace komponenty
Markup
Metadata (kvůli KSS)
Samotné stylování komponenty v LESSu
http://lmc-eu.github.io/emerald/ - grid systém

21. Vydání nové verze
Code review
Manuální testy
Zamergování do masteru
Vydání nové verze dle sémantického verzování

22. Komponenta Tabs
Obsahuje jak styly, tak i funkční javascript
Lze využít i více tabů na jedné stránce

23. Komponenta Tabs

24. Komponenta Tabs

25. Komponenta Tabs

26. Komponenta Tabs

27. Komponenta Tabs
.tabs {
….
&__item{
…
@media only screen and (max-width: @screen-lap-max) {
…
}
}
&__link {
…
&:hover, &—active {
…
}
}
}

28. Komponenta Tabs
Tabs.prototype.process = function (el) {
var $el = $(el);
var target = $el.attr('href').substring(1);
this.tabs
.removeClass(this.activeClass)
.filter('[href="#' + target + '"]')
.addClass(this.activeClass);
this.panels
.hide()
.filter('[id="' + target + '"]')
.show();
};
module.exports = Tabs;

29. Komponenta Tabs

30. Komponenta Tabs

31. Integrace knihovny
"dependencies": {
"jobs-ui": "ssh://git@stash.int.lmc.cz/jobs-ui.git#v4.47.0",
}
pomocí Bower:
www.jobs.cz/ui

32. Integrace knihovny
• Integrační vizuální prvek pro aplikace třetích
stran;
• UI-Components - generátor šablon a komponent
v PHP založené na JobsUI;
• ostatní týmy v rámci firmy či externisté.

33. Jaké problémy nás potkaly?

34. Proč
Znovupoužitelnost
Přehlednost
@Krejcek martin.kristof@lmc.eu