The New Renaissance of JavaScript

50 %
50 %
Information about The New Renaissance of JavaScript

Published on June 6, 2019

Author: hamletbatista

Source: slideshare.net

1. @HamletBatista

2. @HamletBatista https://en.wikipedia.org/wiki/Coco_(folklore)

3. @HamletBatista JavaScript El Coco≠

4. @HamletBatista https://github.com/ranksense/gtrends-watch

5. @HamletBatista

6. @HamletBatista

7. @HamletBatista

8. @HamletBatista Rendering by JavaScript execution target: • Client side rendering • Hybrid rendering (Client and server) • Dynamic rendering (Client and Server only for bots) TERMINOLOGY Rendering by execution time: • Pre-rendering (at build time) • Server side rendering (on demand)

9. @HamletBatista Use automated tests to stop JavaScript related SEO errors before it's too late! Scan and tweet #SMXInsights

10. @HamletBatista Common SEO errors can be avoided by including automated checks in the codebase USE AUTOMATED TESTS TO PREVENT JAVASCRIPT RELATED SEO ERRORS https://jasmine.github.io/

11. @HamletBatista Unit tests help check every component individually performs as expected USE AUTOMATED TESTS TO PREVENT JAVASCRIPT RELATED SEO ERRORS

12. @HamletBatista Not every component is in scope of SEO (might be invisible to bots) USE AUTOMATED TESTS TO PREVENT JAVASCRIPT RELATED SEO ERRORS https://angular.io/guide/architecture-components

13. @HamletBatista

14. @HamletBatista SEO Developer/QA • Define which components are in SEO scope • Define reasonable checks (missing tags, incomplete, etc) UNIT TESTING RESPONSIBILITIES • Write unit tests • Fix code when tests fail

15. @HamletBatista End to end/integration tests help check overall operation USE AUTOMATED TESTS TO PREVENT JAVASCRIPT RELATED SEO ERRORS https://www.protractortest.org/

16. @HamletBatista Many user actions are not in scope of SEO (clicking/saving) USE AUTOMATED TESTS TO PREVENT JAVASCRIPT RELATED SEO ERRORS

17. @HamletBatista End to end tests are ideal to check for rendering problems USE AUTOMATED TESTS TO PREVENT JAVASCRIPT RELATED SEO ERRORS

18. @HamletBatista

19. @HamletBatista SEO Developer/QA • Define which actions are in SEO scope (reasonable by search engines) • Define reasonable checks (consistent content server vs client, consistent tagging server vs client) END TO END TESTING RESPONSIBILITIES • Write e2e tests and add to codebase • Continuous integration leverages automated tests to release quality code fast

20. @HamletBatista • AngularJS • https://angular.io/guide/testing • https://docs.angularjs.org/guide/e2e-testing • ReactJS • https://reactjs.org/community/testing.html • https://www.cypress.io/ • VueJS • https://vuejs.org/v2/guide/unit-testing.html • https://vuejs-templates.github.io/webpack/e2e.html RESOURCES TO LEARN MORE ABOUT AUTOMATED TESTING

21. @HamletBatista Don't pre-render dynamic JavaScript content (changes often), use server side rendering instead Scan and tweet #SMXInsights

22. @HamletBatista • For new sites (use universal JavaScript) • For existing sites (dynamic rendering good temporary solution) PRE-RENDER MOSTLY STATIC CONTENT, SERVER SIDE RENDER OTHERWISE

23. @HamletBatista Server side render (on demand) if it changes in less than 24 hours PRE-RENDER MOSTLY STATIC CONTENT, SERVER SIDE RENDER OTHERWISE

24. @HamletBatista Pre-rendering is expensive (time and cost) if you have too many pages (slows down build/deploy) PRE-RENDER MOSTLY STATIC CONTENT, SERVER SIDE RENDER OTHERWISE

25. @HamletBatista For Hybrid rendering Rendering means executing JS server side in Node PRE-RENDER MOSTLY STATIC CONTENT, SERVER SIDE RENDER OTHERWISE For Dynamic rendering Rendering means launching browser instances to render pages (this is more expensive in time and cost as it needs to fetch images, etc.)

26. @HamletBatista For Dynamic rendering • Caching is essential • Caching dynamic content is tricky and can cause problems (PLA invalidations, accidental cloaking, can't fix mistakes quickly) PRE-RENDER MOSTLY STATIC CONTENT, SERVER SIDE RENDER OTHERWISE https://www.netlify.com/blog/2016/11/22/prerendering-explained/

27. @HamletBatista Background execution with workers to get important content rendered PRE-RENDER MOSTLY STATIC CONTENT, SERVER SIDE RENDER OTHERWISE https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution

28. @HamletBatista • Dynamic rendering https://developers.google.com/search/docs/guides/dynamic-rendering • AngularJs Universal https://angular.io/guide/universal • ReactJs Universal https://github.com/faceyspacey/react-universal-component • VueJs Universal https://ssr.vuejs.org/guide/universal.html RESOURCES TO LEARN MORE ABOUT RENDERING OPTIONS

29. @HamletBatista You need to hack the latest AngularJs framework to place basic tags like canonical and hreflang! Scan and tweet #SMXInsights

30. @HamletBatista The good • No hash fragment URLs (history API paths by default) • Painless universal JavaScript set up and excellent documentation • Same codebase (client and server) prevents cloaking or compliance problems • Basic support for titles and meta tags like description and robots • Supports SSR and prerendering THERE IS VERY BASIC SUPPORT FOR SEO TAGGING

31. @HamletBatista THERE IS VERY BASIC SUPPORT FOR SEO TAGGING

32. @HamletBatista THERE IS VERY BASIC SUPPORT FOR SEO TAGGING

33. @HamletBatista The bad • No built-in support for structured data/JSON-LD • Absolute (server) and relative (client) URLs can introduce errors THERE IS VERY BASIC SUPPORT FOR SEO TAGGING

34. @HamletBatista THERE IS VERY BASIC SUPPORT FOR SEO TAGGING

35. @HamletBatista The ugly • No built-in support for link tags like canonicals • No built-in support for link tags like hreflang tags THERE IS VERY BASIC SUPPORT FOR SEO TAGGING

36. @HamletBatista THERE IS VERY BASIC SUPPORT FOR SEO TAGGING

37. @HamletBatista THERE IS VERY BASIC SUPPORT FOR SEO TAGGING

38. @HamletBatista RESOURCES TO LEARN MORE ABOUT SEO TAGGING • AngularJs https://angular.io/api/platform-browser/Meta • ReactJs https://alligator.io/react/react-helmet/ • VueJs https://alligator.io/vuejs/vue-router-modify-head/

39. @HamletBatista Prevent accidental cloaking issues by using universal JavaScript Scan and tweet #SMXInsights

40. @HamletBatista Running different code for users and bots often leads to inconsistencies LEVERAGE UNIVERSAL JAVASCRIPT • Welcome • User User • Welcome • Visitor Content • Welcome • Search bot Search bot

41. @HamletBatista Headings, images, tags or content that doesn't match LEVERAGE UNIVERSAL JAVASCRIPT

42. @HamletBatista Similar situation with separate code to handle mobile, desktop and tablet LEVERAGE UNIVERSAL JAVASCRIPT

43. @HamletBatista One risk is a cloaking penalty, but a more common one is disapproved shopping feed ads due to compliance issues LEVERAGE UNIVERSAL JAVASCRIPT

44. @HamletBatista Universal is not always practical (some actions don't exist on the server, for example scrolling events) LEVERAGE UNIVERSAL JAVASCRIPT https://medium.com/commencis/isomorphic-universal-javascript-496dc8c4341a

45. @HamletBatista If you need to have separate codebases, cover them with robust unit tests LEVERAGE UNIVERSAL JAVASCRIPT https://istanbul.js.org/

46. @HamletBatista Universal JavaScript uses same code, but careful with relative/absolute paths LEVERAGE UNIVERSAL JAVASCRIPT

47. @HamletBatista Responsive design is ideal to avoid issues LEVERAGE UNIVERSAL JAVASCRIPT

48. @HamletBatista • https://github.com/brillout/awesome-universal-rendering • https://www.oreilly.com/library/view/building-isomorphic- javascript/9781491932926/ch01.html RESOURCES TO LEARN MORE ABOUT UNIVERSAL JAVASCRIPT

49. @HamletBatista Avoid hiding important content behind user actions Scan and tweet #SMXInsights

50. @HamletBatista Rendering hides content that is not visible during the snapshot AVOID HIDING CONTENT BEHIND CLICK/SCROLL ACTIONS

51. @HamletBatista Examples of content that requires clicks: • Tabbed content • Accordion content • Click to read more • Click to load more items AVOID HIDING CONTENT BEHIND CLICK/SCROLL ACTIONS

52. @HamletBatista Another example is content that requires scrolling like: • Infinite scrolls • Slideshows AVOID HIDING CONTENT BEHIND CLICK/SCROLL ACTIONS Alternatively, you could program your renderer to simulate user actions

53. @HamletBatista It is simpler to move the content to a visible area AVOID HIDING CONTENT BEHIND CLICK/SCROLL ACTIONS

54. @HamletBatista Or if the content can stand on its own, create routes to the specific components AVOID HIDING CONTENT BEHIND CLICK/SCROLL ACTIONS

55. @HamletBatista

56. @HamletBatista RESOURCES TO LEARN MORE ABOUT COMPONENT ROUTING • AngularJs https://angular.io/guide/router • ReactJs https://reacttraining.com/react-router/web/guides/quick-start • VueJs https://vuejs.org/v2/guide/routing.html

57. @HamletBatista Delegate long running processes to a service worker Scan and tweet #SMXInsights

58. @HamletBatista A service worker operates outside of the main browser execution thread DELEGATE LONG RUNNING PROCESSES TO A SERVICE WORKER https://angular.io/guide/service-worker-getting-started

59. @HamletBatista • Speed up rendering • Avoid partial rendering issues DELEGATE LONG RUNNING PROCESSES TO A SERVICE WORKER https://angular.io/guide/service-worker-getting-started

60. @HamletBatista RESOURCES TO LEARN MORE SERVICE WORKERS AND PWAS • AngularJs https://angular.io/guide/service-worker-getting-started • ReactJs https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app • VueJs https://github.com/vuejs-templates/pwa

61. @HamletBatista • Free real-time crawler monitor • Quick issue patching in Cloudflare ABOUT RANKSENSE https://www.cloudflare.com/apps/ranksense

62. @HamletBatista

Add a comment