25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

2016-august-recap.html 8.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512
  1. <!DOCTYPE html>
  2. <html>
  3. <meta charset="utf-8">
  4. <head>
  5. <style>
  6. #header
  7. {
  8. background: #2BA6E3;
  9. padding: 0.7em;
  10. text-align: left;
  11. }
  12. #header a
  13. {
  14. color: white;
  15. text-decoration: none;
  16. padding: 0.5em 1em 0.5em 1em;
  17. }
  18. .news_item
  19. {
  20. background: #FFFFFF;
  21. width: 720px;
  22. padding: 1em;
  23. margin-top: 2em;
  24. margin-bottom: 2em;
  25. border: 1px solid #E0E0E0;
  26. text-align: left;
  27. }
  28. .news_item_contents
  29. {
  30. color: #444;
  31. line-height: 1.5em;
  32. }
  33. .news_item_date
  34. {
  35. margin-bottom: 2em;
  36. color: #aaa;
  37. }
  38. body
  39. {
  40. background: #FAFAFA;
  41. }
  42. code, pre
  43. {
  44. font-family: monospace, serif;
  45. font-size: 1em;
  46. color: #7f0a0c;
  47. }
  48. figure
  49. {
  50. margin: 0px;
  51. padding: 0px;
  52. }
  53. img
  54. {
  55. width: 720px;
  56. }
  57. html
  58. {
  59. font-family: sans-serif;
  60. }
  61. a
  62. {
  63. color: #3A91CB;
  64. text-decoration: none;
  65. }
  66. #lang
  67. {
  68. float: right;
  69. }
  70. figcaption
  71. {
  72. color: #aaa;
  73. }
  74. table
  75. {
  76. border-collapse: collapse;
  77. }
  78. table, th, td
  79. {
  80. border: 1px solid #aaa;
  81. padding: 0.5em;
  82. margin-top: 0.5em;
  83. margin-bottom: 0.5em;
  84. }
  85. </style>
  86. </head>
  87. <body>
  88. <center>
  89. <div id="header">
  90. <a href="../../en/news/index.html">News</a>
  91. <a href="../../en/page/games.html">Games</a>
  92. <a href="../../en/page/about.html">About</a>
  93. <div id="lang">
  94. <a href="2016-august-recap.html">EN</a>
  95. <a href="../../ru/news/2016-august-recap.html">RU</a>
  96. </div>
  97. </div>
  98. <h1>In the news</h1>
  99. <div class="news_item">
  100. <h2 class="news_item_title">
  101. <a href="2016-august-recap.html">August 2016 recap</a>
  102. </h2>
  103. <p class="news_item_date">
  104. 2016-09-03 00:00
  105. </p>
  106. <div class="news_item_contents">
  107. <figure>
  108. <img src="../../images/2016-09-03_august-recap.png" alt="OGS Editor with a spherical scene node" /><figcaption>OGS Editor with a spherical scene node</figcaption>
  109. </figure>
  110. <p>This article explains the most important technical details about development in August: UIQt module, its refactoring, a new feature based development approach, and its benefits.</p>
  111. <p><strong>UIQt module</strong> is a collection of UI components backed by Qt. We only use it for Editor UI at the moment.</p>
  112. Here is a list of UIQt module components with their description and current code size:
  113. <table>
  114. <tr>
  115. <th>
  116. <strong>№</strong>
  117. </th>
  118. <th>
  119. <strong>Component</strong>
  120. </th>
  121. <th>
  122. <strong>Description</strong>
  123. </th>
  124. <th>
  125. <strong>Size (B)</strong>
  126. </th>
  127. <th>
  128. <strong>Size (%)</strong>
  129. </th>
  130. </tr>
  131. <tr>
  132. <td>
  133. 1
  134. </td>
  135. <td>
  136. UIQtAction
  137. </td>
  138. <td>
  139. Actions (events) for menus
  140. </td>
  141. <td>
  142. 11224
  143. </td>
  144. <td>
  145. 9
  146. </td>
  147. </tr>
  148. <tr>
  149. <td>
  150. 2
  151. </td>
  152. <td>
  153. UIQtAux
  154. </td>
  155. <td>
  156. Initializes Qt and main window. Provides widget resolution by name to other components
  157. </td>
  158. <td>
  159. 15518
  160. </td>
  161. <td>
  162. 12
  163. </td>
  164. </tr>
  165. <tr>
  166. <td>
  167. 3
  168. </td>
  169. <td>
  170. UIQtDock
  171. </td>
  172. <td>
  173. Widget docks
  174. </td>
  175. <td>
  176. 5273
  177. </td>
  178. <td>
  179. 4
  180. </td>
  181. </tr>
  182. <tr>
  183. <td>
  184. 4
  185. </td>
  186. <td>
  187. UIQtFileDialog
  188. </td>
  189. <td>
  190. File selection dialogs
  191. </td>
  192. <td>
  193. 8960
  194. </td>
  195. <td>
  196. 7
  197. </td>
  198. </tr>
  199. <tr>
  200. <td>
  201. 5
  202. </td>
  203. <td>
  204. UIQtMenu
  205. </td>
  206. <td>
  207. Menus for main window and pop-ups (like node’s add/copy/paste/delete menu)
  208. </td>
  209. <td>
  210. 4566
  211. </td>
  212. <td>
  213. 3
  214. </td>
  215. </tr>
  216. <tr>
  217. <td>
  218. 6
  219. </td>
  220. <td>
  221. UIQtMenuBar
  222. </td>
  223. <td>
  224. Menu bar for main window
  225. </td>
  226. <td>
  227. 4222
  228. </td>
  229. <td>
  230. 3
  231. </td>
  232. </tr>
  233. <tr>
  234. <td>
  235. 7
  236. </td>
  237. <td>
  238. UIQtRunner
  239. </td>
  240. <td>
  241. Allows to start QApplication
  242. </td>
  243. <td>
  244. 2450
  245. </td>
  246. <td>
  247. 2
  248. </td>
  249. </tr>
  250. <tr>
  251. <td>
  252. 8
  253. </td>
  254. <td>
  255. UIQtThumbnailDialog
  256. </td>
  257. <td>
  258. Dialog with thumbnail images
  259. </td>
  260. <td>
  261. 18615
  262. </td>
  263. <td>
  264. 14
  265. </td>
  266. </tr>
  267. <tr>
  268. <td>
  269. 9
  270. </td>
  271. <td>
  272. UIQtToolBar
  273. </td>
  274. <td>
  275. Tool bar for main window
  276. </td>
  277. <td>
  278. 4276
  279. </td>
  280. <td>
  281. 3
  282. </td>
  283. </tr>
  284. <tr>
  285. <td>
  286. 10
  287. </td>
  288. <td>
  289. UIQtTree
  290. </td>
  291. <td>
  292. Provides complex widgets like Scene tree and Property browser
  293. </td>
  294. <td>
  295. 51216
  296. </td>
  297. <td>
  298. 39
  299. </td>
  300. </tr>
  301. <tr>
  302. <td>
  303. 11
  304. </td>
  305. <td>
  306. UIQtWidget
  307. </td>
  308. <td>
  309. Common widget properties like focus and visibility
  310. </td>
  311. <td>
  312. 5465
  313. </td>
  314. <td>
  315. 4
  316. </td>
  317. </tr>
  318. </table>
  319. <p><strong>UIQt module refactoring</strong> purpose was to replace old State API with new Environment API, which allows to achieve the same functionality with less code, i.e., makes development easier and faster.</p>
  320. <p>Refactoring started in July and should have been done the same month. However, we only finished the work in August. Initial plan assumed 28 hours would be enough, but we spent 65 instead. We estimated planned time by relying on the number of public API calls of each component. That worked fine for small components, because the number of their public API calls was roughly equal to the number of their features, and features themselves were very small. However, it totally failed for UIQtTree, which contains 39% of UIQt module code, because there was no direct connection between public API and features.</p>
  321. <p><strong>Feature based development approach</strong> was born as a result of UIQtTree refactoring struggle. Since Qt uses MVC, UIQtTree component consists of several classes. By the time UIQtTree could display and manage a hierarchy of items, the component was already 27K in size. We noticed UIQtTree started to require abnormal amount of development time even for tiny features. This was an obvious <a href="http://kornerr.blogspot.com/2012/04/complexity-conservation-law-complexity.html">quantitative complexity</a> manifestation.</p>
  322. <p>We decided to separate UIQtTree into base part and additional ones. Base would only contain minimal code required by all features. Addition would contain specific feature code and could be safely modified. In the case of UIQtTree, item hierarchy display and modification is the minimal functionality, while item renaming is an addition.</p>
  323. <p>Here is a list of current UIQtTree features:</p>
  324. <table>
  325. <tr>
  326. <th>
  327. <strong>№</strong>
  328. </th>
  329. <th>
  330. <strong>Feature</strong>
  331. </th>
  332. <th>
  333. <strong>Description</strong>
  334. </th>
  335. <th>
  336. <strong>Size (B)</strong>
  337. </th>
  338. <th>
  339. <strong>Size (%)</strong>
  340. </th>
  341. </tr>
  342. <tr>
  343. <td>
  344. 1
  345. </td>
  346. <td>
  347. Base
  348. </td>
  349. <td>
  350. Allows to construct item hierarchy, modify it, and display it
  351. </td>
  352. <td>
  353. 26966
  354. </td>
  355. <td>
  356. 52
  357. </td>
  358. </tr>
  359. <tr>
  360. <td>
  361. 2
  362. </td>
  363. <td>
  364. Item open state
  365. </td>
  366. <td>
  367. Keeps track of collapsed/expanded item properties
  368. </td>
  369. <td>
  370. 3094
  371. </td>
  372. <td>
  373. 6
  374. </td>
  375. </tr>
  376. <tr>
  377. <td>
  378. 3
  379. </td>
  380. <td>
  381. Item renaming
  382. </td>
  383. <td>
  384. Allows to rename an item
  385. </td>
  386. <td>
  387. 3471
  388. </td>
  389. <td>
  390. 7
  391. </td>
  392. </tr>
  393. <tr>
  394. <td>
  395. 4
  396. </td>
  397. <td>
  398. Item selection
  399. </td>
  400. <td>
  401. Allows to get/set selected item
  402. </td>
  403. <td>
  404. 2338
  405. </td>
  406. <td>
  407. 5
  408. </td>
  409. </tr>
  410. <tr>
  411. <td>
  412. 5
  413. </td>
  414. <td>
  415. Item value
  416. </td>
  417. <td>
  418. Provides 2nd and the rest columns for items, used by Property browser
  419. </td>
  420. <td>
  421. 1307
  422. </td>
  423. <td>
  424. 3
  425. </td>
  426. </tr>
  427. <tr>
  428. <td>
  429. 6
  430. </td>
  431. <td>
  432. Item value editing
  433. </td>
  434. <td>
  435. Allows to edit item values with a default editor widget
  436. </td>
  437. <td>
  438. 1996
  439. </td>
  440. <td>
  441. 4
  442. </td>
  443. </tr>
  444. <tr>
  445. <td>
  446. 7
  447. </td>
  448. <td>
  449. Item value editing with combobox
  450. </td>
  451. <td>
  452. Provides combobox editor
  453. </td>
  454. <td>
  455. 5819
  456. </td>
  457. <td>
  458. 11
  459. </td>
  460. </tr>
  461. <tr>
  462. <td>
  463. 8
  464. </td>
  465. <td>
  466. Item value editing with spinner
  467. </td>
  468. <td>
  469. Provides spinbox editor
  470. </td>
  471. <td>
  472. 5290
  473. </td>
  474. <td>
  475. 10
  476. </td>
  477. </tr>
  478. <tr>
  479. <td>
  480. 9
  481. </td>
  482. <td>
  483. Menu
  484. </td>
  485. <td>
  486. Provides pop-up menu
  487. </td>
  488. <td>
  489. 1248
  490. </td>
  491. <td>
  492. 2
  493. </td>
  494. </tr>
  495. </table>
  496. <p>Here’s an example of UIQtTree Menu feature file: <a href="https://bitbucket.org/ogstudio-history/mjin-pre-pre/src/0c4cc3c3213f4687c0f3bd6a5426a6054cadd79b/f/TREE_MENU.cpp?at=Studio+0.10&amp;fileviewer=file-view-default">TREE_MENU</a>.</p>
  497. <p><strong>Benefits of the approach</strong> include:</p>
  498. <ol type="1">
  499. <li>Faster code reading/understanding due to small size</li>
  500. <li>Easier and safer modification due to isolated code</li>
  501. </ol>
  502. <p>There’s a drawback, too: new approach requires learning.</p>
  503. <p>That’s it for the most important technical details about development in August: UIQt module, its refactoring, a new feature based development approach, and its benefits.</p>
  504. </div>
  505. </div>
  506. </center>
  507. </body>
  508. </html>