TechTalks - Developer workflow

If you look back in 2010, there was a huge improvement in development of web applications. Evolution of JS opened Front End developers’ tools for building an applications like never before: command-line tools for javascript code, excellent IDEs, building and bundling tools, testing tools, documenting, and many more.

How developers adjust to all the novelties, what are the requests from companies, how to get started with new projects and set the team for using the right stack?

In next talk we invited Marko Arsic who will showcase what he considers to be the best practice for developer’s workflow feature development.

Transcript

1. Tech Talks Developer’s workflow best practice, from user story to production
2. Marko Arsić CEO at HypeTech Independent Tech Consultant Lecturer Tech Talks Developer’s workflow best practice, from user story to production
4. 1. User Story
6. Client Company who is building a backend application to ease some of its business tasks User Story As a manager, I want to monitor the activity of my team, so that I can detect any misdoing After discussing with the customer, we agree that the best solution would be to record most actions of the team members in an audit trail, and to display these actions to the manager in reverse chronological order (the latest actions first) in a timeline.
7. 2. UX/UI
8. Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. Jakob's Law
10. 3. Fake Data
11. a. Some events don't have an author. In that case, the event author should be named "Anonymous" b. Some events can have a long label and may span across several lines. That also means that the title should use an ellipsis to avoid breaking the layout. c. The event label doesn't seem to be easy to automate. For instance, the end user prefers to see "XXX commented" instead of "XXX added a comment".
13. 4. Designing Incomplete States
14. Loading When the application has loaded and requested the events, but the server hasn't answered yet. This is a transitional state but it may last a few seconds. Empty When the server has answered with an empty list of events - probably at the early days of the manager's team. Error When the server timed out or responded with an error. Yes, that happens, too
16. As for the UI, the customer has already chosen Material Design, so I'll just have to translate the mockups into some of the components showcased at material.io.
17. 5. Naming Things
18. Don’t dive straight into code, take a moment and write things on a paper first It's very easy to get lost in implementation details, and these details can lead to a bad code architecture Start from the domain, list responsibilities, and to decide which part of the code will be responsible for each one
19. Timeline TimelineLoaded EventList EventItem Avatar TimelineLoading TimelineEmpty
20. Don’t be afraid to create more components
21. 6. Develop In Isolation
23. Start With a Story Climb the Component Tree Extracting Logic to Non-Component Code Keep Presentational Components Small
24. 7. Manage UI State
25. 8. Integrating With main app
26. 9. CI/CD
27. 10. Automatic/Manual deploy
28. Q & A
29. email: marko@hypetech.io