import { Horizontal, Split, Steps } from 'mdx-deck'; import myTheme from './theme';
export const theme = myTheme;
<img src="https://raw.githubusercontent.com/aidenybai/lucia/master/.github/img/logo.svg" style={{ width: '500px' }} />
<i style={{ opacity: 0.5 }}>(aka: code that makes making websites FAST)
Aiden Bai
- Non-interactive
- Simple + static
- No functionality
<img src="https://img.huffingtonpost.com/asset/5bb360032100002501c7c862.png?ops=scalefit_960_noupscale" style={{ width: '40%' }} />
Figure 1: Yahoo webpage in 1999
- Interactive
- Slow + complex
- Bad UX + DX
<img src="https://assets-global.website-files.com/6009ec8cda7f305645c9d91b/6010825ef15c635b74fdc6ab_6002086f72b727192b01d6ef_whalesynth-navigation.gif" style={{ width: '40%' }} />
Figure 2: Extremely interactive website with slow performance
- Conservative Execution
- Immutable Patterns
- Lightweight Core
- Scalability + Reactivity
<img src="https://f.aidenybai.com/wCSpi.jpg" style={{ width: '40%' }} />
Figure 3: Spreadsheet reactivity dependency example
- Language: TypeScript
- Build: Rollup/Babel
- Repository: Github
- Publish: NPM + Unpkg
- Testing: Jest, Ad-hoc
- Code Editor: VSCode
<img src="https://f.aidenybai.com/JG2My.jpg" style={{ width: '45%' }} />
Figure 4: Lucia creation process flowchart
<img src="https://f.aidenybai.com/2zUI3.jpg" style={{ width: '60%' }} />
Figure 5: Lucia Core process flowchart
<img src="https://f.aidenybai.com/ZNTZi.jpg" style={{ width: '50%' }} />
Figure 6: Comparison table of major JavaScript Libraries
<img src="https://f.aidenybai.com/DXwO4.jpg" style={{ width: '50%' }} />
Figure 7: Column Graph of weighted score for JavaScript Libraries
- Used by: Wegli, Glitch.com users
- Featured in: Hacker News, JavaScript Weekly
- Reception: 440+ stars, 20k+ unique visitors
<img src="https://f.aidenybai.com/Mzyvy.jpg" style={{ width: '50%' }} />
Figure 8: Wegli website using Lucia
- Simple to integrate and super fast
- Many use cases - production ready
- Learned about JavaScript library internals
- ~8mo work, 7-10h/week
- Created a useful product
- Promote to more developers
- Create tooling for 1.0.0
- Jensen, S. H., Madsen, M., & Møller, A. (2011, June 11). Modeling the HTML DOM and Browser API in Static Analysis of JavaScript Web Applications [Modeling the HTML DOM and Browser API in Static Analysis of JavaScript Web Applications]. 19th ACM SIGSOFT symposium. Retrieved October 11, 2020, from https://users-cs.au.dk/amoeller/papers/dom/paper.pdf
- Mariano, C. L., B.E. Hons. (2017, January). Benchmarking JavaScript Frameworks [Benchmarking JavaScript Frameworks]. Technological University Dublin. Retrieved October 10, 2020, from https://arrow.tudublin.ie/cgi/viewcontent.cgi?article=1100&context=scschcomdis
- Molin, E. (2016, October 16). Comparison of Single-Page Application Frameworks [Comparison of Single-Page Application Frameworks]. Diva Portal. Retrieved October 11, 2020, from https://www.diva-portal.org/smash/get/diva2:1037481/FULLTEXT01.pdf
- Muyldermans, D. (2019, May 10). How Does the virtual DOM compare to other DOM updating mechanisms in JavaScript frameworks? [How Does the virtual DOM compare to other DOM updating mechanisms in JavaScript frameworks?]. University of Dublin. Retrieved October 10, 2020, from http://www.daisyms.com/THESIS.pdf
- Persson, M. (2020, May 28). JavaScript DOM Manipulation Performance [JavaScript DOM Manipulation Performance]. Diva Portal. Retrieved October 10, 2020, from https://www.diva-portal.org/smash/get/diva2:1436661/FULLTEXT01.pdf