Technology and Culture for the Modern Web

FamilySearch is the largest genealogy organization in the world, and embraces high quality, leading edge technology to scale product development. In this case study, developer and technology evangelist Josh Crowther presents an overview of how FamilySearch is using Web Components, Polymer, and other tools to improve productivity and user experience. Josh will give you an closer look at why FamilySearch chooses these technologies, and how, as an enterprise, they are able to encourage innovation while maintaining a stable product.

Transcript

1. Technology and Culture for the Modern Web
2. About Me Josh Crowther (@jshcrowthe) Tech Lead - Family Search • Open Source Advocate - Node.js - Web Components
 • Technology Enthusiast - IoT - MicroControllers - Web Software
3. Presentation Roadmap 1. What is FamilySearch? 2. Leveraging the Web 3. Web Technologies a. The Past b. The Future 4. Fostering Innovation and Learning a. Conferences b. Open Source c. Personal Development Time d. Training
4. What is FamilySearch?
5. What is FamilySearch? • A nonprofit family history organization dedicated to connecting families across generations. • The largest genealogy organization in the world.
6. What is FamilySearch? Image Capture Digital Conversion Preservation Online Indexing Online Access
7. What is FamilySearch? Free A service to all at no cost 4+ Billion Names from all over the world 4,745 FamilySearch Centers worldwide 24/7 Free expert phone support
8. Leveraging the Web
9. Internet Reach “Around 40% of the world population has an internet connection today. In 1995, it was less than 1%. The number of internet users has increased tenfold from 1999 to 2013. The first billion was reached in 2005. The second billion in 2010. The third billion in 2014.” - www.internetlivestats.com/ internet-users/ http://www.internetlivestats.com/internet-users/
10. “…If this trend [internet growth] continues, we expect there to be 5 billion active internet users by 2020 – which means a vast majority [approx. 70%] of the world’s population will have access to internet.” -https://www.dospeedtest.com/
11. Web Technologies
12. Requirements for Web Technologies Modular Performant We needed a solution that would allow us to encapsulate functionality such that it was easy to use and re-use. We needed a solution that was capable of being performant both at page load time as well as runtime. Testable Composable We needed a solution that could be tested so that future additions/changes to the codebase wouldn’t break the existing code. We needed a solution that enabled developers to write code that achieved results quickly, without sacrificing quality.
13. Progression of Web Technologies
14. This was good… but things are changing yet again…
15. Web Components
16. ≠ Not Just Another Framework
17. What are Web Components? A combination of 4 specs that together create modular browser native HTML widgets. • Custom Elements • HTML Imports • Shadow DOM • Template Element
18. Custom Elements Enables a developer to define new DOM elements. These elements can have a variety of functions and behavior that are defined by the developer. The elements can then be used anywhere a normal element could be (HTML/ CSS/JS).
20. HTML Imports The “#include for the web,” HTML Imports are a way of including/reusing HTML documents inside of other HTML documents.
22. Shadow DOM A way of nesting multiple DOM trees inside one another while keeping them functionally and stylistically isolate.
24. Template Element A way to declare a fragment of HTML that can later be used to recreate identical copies of that HTML.
26. Web Components meet the Requirements Modular Performant Web Components are HTML widgets that are consumed as HTML. They are functionally/stylistically isolated from other components so they just work out of the box. Web Components are just DOM, the run time performance is comparable to native DOM. Loading the components can be done on demand to prevent bloating of initial download. Testable Composable Web Components are just DOM. They have the same expected HTML elements and behaviors as any other tag. DOM testing is already supported by many (if not all) testing frameworks. Web Components are highly composable and by creating a small library of Web Components developers can build rich interfaces in a fraction of the time it would normally take.
27. Polymer
28. Polymer Features Lifecycle Callbacks Data Binding Events Behaviors Declared Properties Utility Functions Local DOM Styling
29. Web Components in Production
30. Web Components in Production <birch-artifact-grid-item> <cedar-button> <birch-artifact-grid> <memory-upload> <audio-artifact>
31. Fostering Innovation and Learning
32. Difficulties Creating a culture where innovation and learning are common is difficult, in any size organization. Things that help: • Conferences • Open Source • Personal Development Time • In House Training
33. Conferences
34. Open Source “Other people like open source software because it helps them become better programmers. Because open source code is publicly accessible, students [or developers] can easily study it as they learn to make better software. Students [or Developers] can also share their work with others, inviting comment and critique, as they develop their skills. When people discover mistakes in programs' source code, they can share those mistakes with others to help them avoid making those same mistakes themselves.” - https://opensource.com
35. Personal Development Time “Learning is a lifelong process of keeping abreast of change. And the most pressing task is to teach people how to learn.” -Peter Drucker
36. CodeMix In House Training
37. CodeMix / Book Club Times to get together and share with one another things that we have seen or learned about. Example topics include: • Progressive Web Applications • Service Worker • Functional Reactive Programming • Web Components • Flux/Redux • Electron • Falcor
38. Skill Building Program A set of curriculum covering different areas of the web and our stack Topics Include: • Javascript • CSS • HTML5 • Web Performance • Web Components
39. Open Source Skill Building Program https://github.com/fs-webdev/skill-building-program/
40. @jshcrowthe SlideDeck https://speakerdeck.com/ jshcrowthe https://familysearch.org Image(s) or Footage (as applicable), used under license from Shutterstock.com