Successfully reported this slideshow.
Your SlideShare is downloading. ×

Trying to build an Open Source browser in 2020

Ad

@pati_gallardo
TurtleSec
@pati_gallardo
Turtle
Sec

Ad

@pati_gallardo
TurtleSec
...actually before 2005
2

Ad

@pati_gallardo
TurtleSec
But I have no money
At least not for this...
3

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 84 Ad
1 of 84 Ad

Trying to build an Open Source browser in 2020

Download to read offline

A lot of things have been developed over the last 15 years that should make the process of making a browser easier. In this talk we will explore a bunch of different tools, platforms and libraries that could go into making a browser in 2020.

We will also see a live demo of a simple browser built with these OSS projects. We will also discuss the limitations and future work needed to make this work in practice.

A lot of things have been developed over the last 15 years that should make the process of making a browser easier. In this talk we will explore a bunch of different tools, platforms and libraries that could go into making a browser in 2020.

We will also see a live demo of a simple browser built with these OSS projects. We will also discuss the limitations and future work needed to make this work in practice.

Advertisement
Advertisement

More Related Content

Slideshows for you (19)

Advertisement

More from Patricia Aas (20)

Advertisement

Trying to build an Open Source browser in 2020

  1. 1. @pati_gallardo TurtleSec @pati_gallardo Turtle Sec
  2. 2. @pati_gallardo TurtleSec ...actually before 2005 2
  3. 3. @pati_gallardo TurtleSec But I have no money At least not for this... 3
  4. 4. @pati_gallardo TurtleSec What does it take? - Development needs people = money - Maintenance needs people = money - Hosting = money 4
  5. 5. @pati_gallardo TurtleSec What is the “browser business model”? Google Search About 1$ per user/year… maybe 5
  6. 6. @pati_gallardo TurtleSec I don’t have a deal now at least Google is only interested once you have users There is no bootstrapping process 6
  7. 7. @pati_gallardo TurtleSec 0 budget1 dev Open Source Heh... More a stunt than a plan 7
  8. 8. @pati_gallardo TurtleSec @pati_gallardo Upside is… ...it’s 2020? 8
  9. 9. @pati_gallardo Turtle Sec Trying to build an Open Source browser in 2020 Patricia Aas Meeting C++ Online 2020
  10. 10. @pati_gallardo Turtle Sec Patricia Aas - Trainer & Consultant C++ Programmer, Application Security Currently : TurtleSec Previously : Vivaldi, Cisco Systems, Knowit, Opera Software Master in Computer Science Pronouns: she/her First job, first browserSecondThird Fourth
  11. 11. @pati_gallardo TurtleSec @pati_gallardo Clearly, I have a thing for browsers 11
  12. 12. @pati_gallardo TurtleSec @pati_gallardo Why? Technically challenging I use it myself Lots of other users I believe in the web 12
  13. 13. @pati_gallardo TurtleSec @pati_gallardo Outside of Firefox this is the general landscape of browsers in 2020... 13
  14. 14. @pati_gallardo TurtleSec Konqueror Safari Chrome Edge Opera KHTML Webkit Blink KDE Apple Google Vivaldi Chromium 14
  15. 15. @pati_gallardo Then I made a toy browser A bit by accident 15
  16. 16. Isolating GPU Access in its own process Patricia Aas, TurtleSec NDC TechTown 2018 Turtle Sec @pati_gallardo
  17. 17. Demo of Composition ...I might have made a browser... ...I might have decided to have a demo last night... Turtle Sec @pati_gallardo 2018 Slide
  18. 18. @pati_gallardo TurtleSec @pati_gallardo But I got busy 18
  19. 19. @pati_gallardo TurtleSec @pati_gallardo I was doing on-prem international trainings March 2020: everything got canceled 19
  20. 20. @pati_gallardo TurtleSec So… I guess I suddenly have some time? 20
  21. 21. @pati_gallardo TurtleSec @pati_gallardo TurtleBrowser 21
  22. 22. @pati_gallardo TurtleSec Skimming the surface Bring-up time is Queen No time for Depth First 22 So, if the last 10% of functionality is 90% of the time... ..then the first 90% is 10% of the time, right?
  23. 23. @pati_gallardo TurtleSec @pati_gallardo GUI framework 23 Porting layer
  24. 24. @pati_gallardo TurtleSec @pati_gallardo Initial platforms Linux MacOS Windows 24 Porting layer Mobile too, eventually
  25. 25. @pati_gallardo TurtleSec @pati_gallardo Qt ( C++ ) Qml 25
  26. 26. @pati_gallardo TurtleSec @pati_gallardo C++ for business logic Qml for GUI 26
  27. 27. @pati_gallardo TurtleSec What does Qml look like? Imagine if JSON, JavaScript and CSS had a baby... 27
  28. 28. @pati_gallardo TurtleSec WebPage.qml import QtQml 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 import QtWebEngine 1.10 import "url.js" as URL ColumnLayout { AddressBar { url: webView.url onReload: webView.reload() onBack: webView.goBack() onForward: webView.goForward() onGoToAddress: webView.typedText = address } WebEngineView { id: webView property string typedText: "" onTypedTextChanged: { webView.url = URL.construct(typedText) } } } @pati_gallardo Importing Qml modules Importing JS files Custom Qml Component Defined in a file in this directory QtWebEngine Component Imported on line 4 28
  29. 29. @pati_gallardo TurtleSec Advantage of Qml Easy to change the GUI 29
  30. 30. @pati_gallardo TurtleSec @pati_gallardo Desktop WebView 30
  31. 31. @pati_gallardo TurtleSec @pati_gallardo Chromium Blink QtWebEngine This bit will get complicated 31
  32. 32. @pati_gallardo TurtleSec @pati_gallardo Build System 32
  33. 33. @pati_gallardo TurtleSec @pati_gallardo CMake 33
  34. 34. @pati_gallardo TurtleSec @pati_gallardo Dependency Management 34
  35. 35. @pati_gallardo TurtleSec @pati_gallardo Conan 35
  36. 36. @pati_gallardo TurtleSec @pati_gallardo conan-qt Eric Lemanissier Config Qt modules 36
  37. 37. @pati_gallardo TurtleSec @pati_gallardo CI/CD 37
  38. 38. @pati_gallardo TurtleSec @pati_gallardo GitHub Actions 38
  39. 39. @pati_gallardo TurtleSec @pati_gallardo conan-cache GitHub Action Hack Stuff .conan into git Push it to GitHub GitHub LFS 39
  40. 40. @pati_gallardo TurtleSec @pati_gallardo Docker Action JavaScript Action Docker Actions are Linux only! 40
  41. 41. @pati_gallardo TurtleSec @pati_gallardo Hack Call shell script from JavaScript 41
  42. 42. @pati_gallardo TurtleSec @pati_gallardo Testing 42
  43. 43. @pati_gallardo TurtleSec @pati_gallardo Qml C++ GUI Driver? 43
  44. 44. @pati_gallardo TurtleSec @pati_gallardo Licensing 44
  45. 45. @pati_gallardo TurtleSec @pati_gallardo Chromium Qt Pretty Safe Maneuverable Remember, we have no money 45
  46. 46. @pati_gallardo TurtleSec @pati_gallardo - Collect Conan licenses - Make qrc - Make GUI to display - MONITOR 46
  47. 47. @pati_gallardo TurtleSec MVP Build/Tests Window“Update” Webview ShortcutsPackaging WebView TabsLicenses 47
  48. 48. @pati_gallardo TurtleSec @pati_gallardo Packaging 48
  49. 49. @pati_gallardo TurtleSec @pati_gallardo CPack 49
  50. 50. @pati_gallardo TurtleSec @pati_gallardo Web Site 50
  51. 51. @pati_gallardo TurtleSec @pati_gallardo GitHub Pages Jekyll Theme 51
  52. 52. @pati_gallardo TurtleSec @pati_gallardo Releases 52
  53. 53. @pati_gallardo TurtleSec @pati_gallardo GitHub Releases? 53
  54. 54. @pati_gallardo TurtleSec Web Autocomplete Tab cyclingFind in Page Menu/middle clickNotifications Certificates Url/load displayDialogs 54
  55. 55. @pati_gallardo TurtleSec @pati_gallardo 55 Alpha Release
  56. 56. @pati_gallardo TurtleSec Alpha Custom Shortcuts AccessibilitySessions Design/StylingDevTools UPDATE Webview LanguagesDownloads 56
  57. 57. @pati_gallardo TurtleSec @pati_gallardo GUI Styling 57
  58. 58. @pati_gallardo TurtleSec @pati_gallardo Qt Imagine Style 58
  59. 59. @pati_gallardo TurtleSec @pati_gallardo The Hard Parts 59
  60. 60. @pati_gallardo TurtleSec @pati_gallardo Updating Chromium 60
  61. 61. @pati_gallardo TurtleSec How Qt has designed it Start of 2020 Qt5.14 Qt5.15 7780 Chromium 2019 77 80 By the time a new Qt version is released the Chromium version is almost a year old. 61
  62. 62. @pati_gallardo TurtleSec @pati_gallardo Chromium browser releases have to follow Chromium releases. NOT Qt releasesWe’re not going to play browser 62
  63. 63. @pati_gallardo TurtleSec How it has to be 81 82 83 84 8588 87 86 Qt5.15 Qt5.14 80Start of 2020 Chrome Vivaldi 77 63
  64. 64. @pati_gallardo TurtleSec @pati_gallardo Sandboxing 64
  65. 65. @pati_gallardo TurtleSec @pati_gallardo ● Platform specific ● Qt has disabled ● Process architecture different 65
  66. 66. @pati_gallardo TurtleSec NS(User) NS(Pid)NS(Net)Web Network Filesystem System Calls chroot seccomp, capset Resources setrlimit Linux 66
  67. 67. @pati_gallardo TurtleSec @pati_gallardo Proprietary Media 67
  68. 68. @pati_gallardo TurtleSec @pati_gallardo - Codec Patents - Free ffmpeg - QtMultimedia? 68
  69. 69. @pati_gallardo TurtleSec @pati_gallardo 69 Beta Release
  70. 70. @pati_gallardo TurtleSec @pati_gallardo 70
  71. 71. @pati_gallardo TurtleSec Beta Bookmarks HistoryNew page GUI E ensionsPanel Crash Reporting PrintingAuto Update 71
  72. 72. @pati_gallardo TurtleSec @pati_gallardo Crash Reporting 72
  73. 73. @pati_gallardo TurtleSec @pati_gallardo Sentry 73
  74. 74. @pati_gallardo TurtleSec Server Issue reportLinux browser Stack tracesMacOS browser DeduplicationWindows browser 74
  75. 75. @pati_gallardo TurtleSec @pati_gallardo Mobile Alpha 75
  76. 76. @pati_gallardo TurtleSec @pati_gallardo Embedding Platform WebViews 76
  77. 77. @pati_gallardo TurtleSec @pati_gallardo QtWebView 77
  78. 78. @pati_gallardo TurtleSec Mobile UX Intent integrationTesting Intro ScreenApproval Android build iOS buildFeedback 78
  79. 79. @pati_gallardo TurtleSec @pati_gallardo August/September 2020 79
  80. 80. @pati_gallardo TurtleSec Making a browser is not a one person job Just to keep up with Chromium is a full/part-time job But you can get pretty far with just one person And little or no money 80
  81. 81. @pati_gallardo TurtleSec We need a way to pay for Open Source Software GitHub Sponsor? 81
  82. 82. @pati_gallardo TurtleSec 0 budget1 dev Open Source TurtleBrowser It kinda works? 82
  83. 83. @pati_gallardo TurtleSec @pati_gallardo Turtle Sec
  84. 84. @pati_gallardo Turtle Sec Questions? Photos from pixabay.com Patricia Aas, TurtleSec

×