# Website Development ## Domain ALSO SEE: [[API]] | [[Create a Website]] | [[Personal Program]] | [[CF and Next App Development]] DNS Hosting [[HTTPS]] (security) ## Front End (aka client-side) [[HTML]] | [[CSS]] | [[JavaScript]] Advanced: JavaScript frameworks: [[React]], [[Vue]], [[Angular]] ## Back End (aka server-side) frameworks: [[Spring Boot]] ([[Java]]) [[Django]], [[Flask]] ([[Python]]) [[Laravel]], [[Symfony]], [[CakePHP]] ([[PHP]]) [[Ruby on Rails]] ([[Ruby Language|Ruby]]) [[Nodedotjs]], [[React Native]] ([[JavaScript]]) [[dot NET]], [[Xamarin]] ([[C sharp|C#]]) [[Swift]] (Apple, both a language and a framework) [[Flutter]] ([[Dart]]) ### Database (also a server) [[PostgreSQL]] | [[MySQL]] | [[MariaDB]] | [[SQLite]] | [[MongoDB]] ### Web Server (might not be necessary - mostly for apps) responsible for storing, processing, and distributing static and dynamic content and pages to users as websites or apps. [[Apache]] | [[Nginx]] | [[Microsoft IIS]] ## Deployment [Tips from 11ty](https://www.11ty.dev/docs/deployment/) ([[Eleventy]]) Provider options: [[Netlify]] [[Netlify]] Drop [[Vercel]] [[Cloudflare]] Pages If you are hosting the database from your own computer then you need to configure your router to allow communication between the world and between your machine. Also you need to set up some web server in your machine. (Ex. [[Apache|Apache]], [[Nginx]]) ## Operating System (for apps) [[Windows]] | [[Mac OS]] | [[iOS]] | [[Linux]] | [[Android]] ## Planning ### Determine key features Can use the "MoSCoW" approach: - Mo — Must have features - S — Should have features - Co — Could have features - W — Won’t need features ### Tech stack [source](https://www.netsolutions.com/insights/tech-stack-for-web-mobile-app/) >[!NOTE]- some examples >**Airbnb tech stack** > - Programming Languages: Ruby, JavaScript >- Framework: Ruby on Rails >- Databases: MySQL, Amazon RDS, Hadoop >- Server: NGINX > >**Facebook tech stack** (Mobile & Web App) >- Programming Languages: PHP, GraphQL, Hack, JavaScript, Linux, C++ >- Framework: Tornado, React (front-end), Xamarin, Swift, React Native >- Databases: Cassandra, HBase, MariaDB, Hadoop, MySQL >- Server: Apache > >**Uber tech stack** >- Programming Languages: Python, Java, Go, Node.js, C, C++ >- Framework: Node.js, Apache Thrift >- Databases: Schemaless (MySQL), PostgreSQL, Riak, Cassandra, Hadoop, Redis, Twemproxy, M3 (proprietary) >- Server: NGINX, Apache Mesos > >**Dropbox tech stack** >- Programming Languages: Python, C, Go, Swift, Objective-C, Kotlin, Java >- Framework: React >- Databases: MySQL, MemCached >- Server: Apache, NGINX, HA Proxy > >**Netflix tech stack** >- Programming Languages: Java, JavaScript, Python, Kotlin, Swift >- Framework: React, NodeJS, WinJS >- Databases: DynamoDB >- Server: Amazon EC2 and RDS > >Spotify tech stack >- Programming Languages: Python, JavaScript, PHP, C++, HTML5 >- Framework: Hub >- Databases: Hadoop, Cassandra ([comparison](https://www.datastax.com/compare/hadoop-cassandra-architecture-comparison)) >- Server: NGINX, Apache Storm Try: - Programming Languages: [[HTML]], [[Python]]/[[JavaScript]]/ - Framework: [[React]], [[Nodedotjs|Node.js]], [[Apache]] Thrift (to sync with server?) - learn from [[Hub]] (not to use since no longer active), - Database: [[MySQL]] | [[Cassandra]] | [[Hadoop]] - Server: [[Nginx]], [[Apache]] (regular or Mesos or Storm) #### best practice guidance for mobile apps **LAMP** one of the most mature tech stacks, ideally suited for high-performance, functional web apps - [[Linux]] (OS) - [[Apache]] (server) - [[MySQL]] (database) - [[PHP]] / [[Perl]] / [[Python]] (programming language) **MEAN** set of solutions designed to support dynamic websites and web apps - [[MongoDB]] (database) - [[Expressdotjs|Express.js]] (backend framework) - [[Angular]] (frontend framework) - [[Nodedotjs|Node.js]] (JavaScript runtime environment) **MERN** variation of MEAN, swapping in React for the client-facing framework - [[MongoDB]] (database) - [[Expressdotjs|Express.js]] (back-end web application framework) - [[React]] (front-end framework) - [[Nodedotjs|Node.js]] (JavaScript runtime environment) **MEVN** variation of MEAN, MEVN swaps in Vue.js for the client-facing framework - [[MongoDB]] (database) - [[Expressdotjs|Express.js]] (back-end web application framework) - [[Vue|Vue.js]] (front-end framework) - [[Nodedotjs|Node.js]] (JavaScript runtime environment) **Ruby on Rails** covering both the front- and back-end of web app development with a single language that relies extensively on libraries and software bundles known as “gems.” ideally suited to projects that require speed and flexibility. **Microsoft** - [[dot NET|.NET]] (framework) - [[Microsoft SQL]] (server) - ASP.NET and Web Forms (framework) - [[Azure]] (cloud platform) - [[Visual Studio]] **Python-Django** ideally suited to rapid development - [[Python]] (language) - [[Django]] (back-end framework) - [[Apache]] (server) - [[MySQL]] (database) #### tech stacks for native app development: **iOS** for Apple - Objective-C OR [[Swift]] (language) - Apple XCode OR [[AppCode]] (toolkit/development environment) - [[iOS SDK]] (API to support iOS functions) **Android** includes Google, Samsung, Sony, Nokia - [[Kotlin]] or [[Java]] (language) - [[Android Studio]] (development environment) #### Cross-platform [[React Native]] | [[Flutter]] | [[Xamarin]] ## App vs Website mobile apps - must be purpose-built for each platform (native apps) or developed using a cross-platform approach - benefit from increased performance and offline availability - can integrate additional native device features web apps - essentially websites that can be viewed across any browser --- ## Resources [[Resource Index|All Resources]] [Table, HTML and CSS](https://www.w3schools.com/css/tryit.asp?filename=trycss_table_fancy) [[Static vs Dynamic]] [Basic Guide](https://www.netsolutions.com/insights/how-to-build-a-web-app/) ```dataview LIST FROM [[]] WHERE !contains(fileClass, "Primary") and contains(file.folder,"Resources") Sort file.name ``` ```dataview LIST without ID link(file.link,FullTitle) FROM [[]] WHERE !contains(fileClass, "Primary") and contains(file.folder,"Resources") Sort file.name ``` --- ## #Inbox [How to build a wedapp](https://www.netsolutions.com/insights/how-to-build-a-web-app/)