WWW Platform - Modern Landscape

Transcript

1. WWW Platform _modern landscape
2. [ ingredients ]
3. [ wp-multisite ]....
4. letʼs us manage multiple wordpress sites through one admin network.
5. video - create subsite
6. giveʼs LifeLock teams the ability to manage their own page creation.
7. video - create page from template
8. giveʼs LifeLock teams the ability to manage their own page content.
9. video - manage page content floodlight tags editable background images editable text- tfn, cta, copy
10. giveʼs LifeLock teams the ability to manage press releases
11. video - manage press releases
12. giveʼs LifeLock teams the ability to manage upcoming events
13. video - manage upcoming events
14. WWW subsites / - Manage WWW /education - Manage ID101 /pr - Manage Press Releases
15. WWW Campaigning subsites /dm - Digital Marketing /offers - Partner /rn - DM / Right Now
16. with every adventure, there comes some challenges
17. [challenge]
18. [optimization]
19. page speed
20. code redundancy
21. scalability
22. [ ingredients ] we need more
23. [ sass ] [ sass ]....
24. css files are getting larger.
25. more complex
26. harder to maintain
27. this is where [ sass] comes in..
28. [sass] letʼs us use features that don't exist in CSS yet
29. variables, nesting, mixins, inheritance and others
30. video - sass globals: typography, extensions, sprites?
31. using pre-processed css enhances our ability to...
32. ACHIEVE OUR PERFORMANCE GOALS
33. to be optimal, we need to be modular.
34. the importance of modular architecture
35. helps with code convention, easier to leverage global elements
36. ships to QA/QE quicker. easier to debug
37. focuses on detail
38. mitigates regression
39. using sass, json, and html templating....
40. we can create reusable [modules]
41. [mySQL] a mutual relationship [ php] [json ]
42. get data faster?
43. several server calls [ ] mySQL] [ php
44. one call & cached?
45. this is where [ json & php] comes in..
46. [ php][ json]....
47. create a json controller
49. execute json using wp-api
50. wp-admin
51. [json ]
52. this is where { mustache } comes in..
53. { mustache }....
54. Mustache? What?
55. Mustache is a simple logic-less template engine.
56. template : * {{ name }} * {{ age }} * {{ company }} * {{{ company }}}
57. Use key => value to associate data to template
58. data : array( 'name' => "Chris", 'company' => '<b>GitHub</b>', );
59. output: * Chris * * &lt;b&gt;GitHub&lt;/b&gt; * <b>GitHub</b>
60. only create a few html templates
61. data drives the view,
62. better performance
63. What does the final flow look like?
64. json_api_controllers curl json-api parse for mustache bind to mustache template data defines pageview WordPress / mySQL browser render end-user content input < < < <