웹 프레임 워크 소개
로드맵
- 프레임 워크가 무엇인지, 왜 우리가 응용 프로그램 작성에 도움이되는지 토론합니다.
- 프론트 엔드, 백엔드 및 CSS 프레임 워크의 차이점을 배우십시오
- 현재 어떤 프레임 워크가 인기 있고 그 이유를 배우십시오
- 프로젝트에 사용할 프레임 워크에 대한 결정을 내리는 방법을 알고
어떤 유형의 앱을 구축 하시겠습니까?
당신이 확실하지 않다면, 여기와 여기에는 훌륭한 아이디어가 있습니다! 또한 앱을 가장 성공적으로 만드는 것에 대해 생각하는 데 시간을 보내십시오. 테이블에있는 사람들과 아이디어를 토론하십시오.
웹 응용 프로그램 유사성
Facebook, Twitter, LinkedIn 및 Github를보고 가까운 사람들과 보는 유사점 중 일부를 나열하십시오.
프레임 워크는 무엇입니까?
우리가 몇 가지 다른 웹 응용 프로그램을 살펴보면 복제 된 기능이 많이있는 것을 알 수 있습니다. 우리가 위에서 살펴본 모든 사람들은 사용자 인증, 렌더링, 데이터베이스에 연결하고, 볼 수있는 프로필을 가지고 있으며, 모두 정보의 양식 공급을 가지고 있습니다. 내가 원한다면, 나는 새로운 응용 프로그램을 만들고 싶을 때마다 모든 논리를 직접 쓸 수 있습니다. 그러나 대신 우리를 위해 사용할 수있는 많은 도구가 있습니다. 또한 애플리케이션을 구축 할 때 많은 시간 동안 우리는 특정 방식으로 코드를 형식화하여 효율적이며 다른 개발자가 코드를보다 쉽게 이해하도록 돕는 데 도움이됩니다. 웹 프레임 워크는 응용 프로그램의 구조를 달성하는 데 도움이되며 추가 작업없이 응용 프로그램에 추가 할 수있는 추가 기능을 제공합니다. 프레임 워크는 응용 프로그램부터 시작하여 구성 세부 정보가 아닌 응용 프로그램의 기능에 집중할 수 있도록합니다.
Most websites share a very similar (not to say identical) structure. The aim of frameworks is to provide a common structure so that developers don’t have to redo it from scratch and can reuse the code provided. In this way, frameworks allow us to cut out much of the work and save a lot of time.
To summarize: there’s no need to reinvent the wheel.
Awwwards에서.
백엔드 대 프론트 엔드
웹 응용 프로그램의 프론트 엔드는 당신이보고 상호 작용하는 부분입니다. 웹 디자인과 사이트의 상호 작용으로 구성됩니다. 프로그래밍 언어 측면에서, 이것은 거의 항상 페이지의 CSS, HTML 및 JavaScript로 구성됩니다.
백엔드는 서버, 데이터베이스 및 코드와 상호 작용하는 코드로 구성됩니다. 이것은 또한 사이트의 프론트 엔드에 동적 데이터를 제공하는 코드로 구성됩니다. 이것은 대부분의 프로그래밍 레인지에서 처리 할 수 있습니다. 오늘날 우리가 주로 논의 할 것은 Python, Ruby 및 Node JavaScript이지만 수많은 다른 사람들이 있습니다.
사용자 인터페이스 프레임 워크
사용자 인터페이스 프레임 워크는 양식화되고 전문적인 웹 애플리케이션을 만드는 데 도움이됩니다. 대부분은 일종의 그리드 시스템을 포함하여 요소를 잘 정렬 할 수 있고 색 구성표가있어서 처리 할 수 있으며 HTML 구성 요소가 깨끗하고 전문적으로 보이도록 양식화합니다.
이 중 일부는 다음과 같습니다.
- 부트 스트랩
- 트위터에서 잘 알려져 있고 제작되었습니다
- 배우기 쉽고 전문적으로 보입니다
- "부트 스트랩 사이트"를 쉽게 발견 할 수 있습니다.
- 구성 요소를 사용자 정의하기가 어려울 수 있습니다
- 실현
- 깨끗하게 보입니다
- 부트 스트랩보다 조금 더 "재미"
- 많은 스타일링 및 색상 옵션
- Google의 재료 스타일 가이드를 따릅니다
- 기반
- 시맨틱 UI
- 많은 내장
- 테마로 내장되어 커스터마이징이 가능합니다
- 그로 메트
- 접근성에 중점을 둡니다
- 정말 깨끗해 보입니다
- 다른 것 중 일부처럼 사용되지 않습니다
- React JS를 위해 Made (나중에 볼 수있는 또 다른 프레임 워크)
UI 프레임 워크 선택
UI 프레임 워크를 선택하는 것은 대부분 외관과 사이트의 목표에 대한 개인적인 취향에 달려 있습니다. 다른 스타일은 다른 산업에 더 호소하거나 다른 메시지를 전달할 수 있습니다.
다른 것들의 모양을 논의하는 데 몇 분을 보내고 샘플 앱에 가장 적합한 것을 선택하십시오.
프론트 엔드 프레임 워크
- vue
- 배우기 쉽습니다
- 매우 빠릅니다
- 이와 관련된 모든 도구는 잘 포장되어 있습니다
- 각도에서 부품을 가져 와서 반응하고 최적화합니다
- 다른 사람들보다 널리 채택되지 않았습니다
- Flexible- 여러 가지 방법으로 사용할 수 있습니다
- Angularjs
- Google에서 구축했습니다
- 잘 지원됩니다
- 수많은 기능
- 응용 프로그램 확장 성을 향상시킵니다
- 디버그하기 어렵습니다
- 큰 학습 곡선
- 각도 2+
- Google에서 구축했습니다
- 잘 지원됩니다
- 재사용 성을 장려합니다
- 응용 프로그램 확장 성을 향상시킵니다
- 큰 학습 곡선
- 반응
- Facebook에 의해 구축되었습니다
- 프론트 엔드 코드를 구성 요소로 번들로 묶습니다
- 코드와 데이터를 구성하여 코드를보다 재사용 할 수 있도록합니다
- 큰 학습 곡선
- 지적 재산 조항에 대해서는 약간의 논쟁이 있습니다
- 타다 남은 것
- 상자 밖으로 많은 기능을 제공합니다.
- 의견 (서식을 사용해야합니다)
- 가파른 학습 곡선
프론트 엔드 프레임 워크 선택
이 중 일부를 살펴보고 코드를 살펴보십시오. 또한 각각의 장단점을 조사하십시오. 앱 아이디어에 배우거나 통합하는 것이 가장 좋습니다.
백엔드 프레임 워크
- 봄 MVC
- 자바 (배우기 어려운 언어)
- 매우 빠릅니다
- 덜 의견이 있습니다
- 장고
- 파이썬 (배울 수있는 더 쉬운 언어)
- 매우 의견이 많고 구조화되지 않은 사이의 행복한 매체
- 사용자 인증, 데이터베이스 연결 및 렌더링보기와 같은 많은 기능을 상자에서 제공합니다.
- 멋진 프론트 엔드를 통합하기가 어려울 수 있습니다.
- Python의 데이터 처리는 놀랍습니다
- 플라스크
- 파이썬 (배울 수있는 더 쉬운 언어)
- Django보다 의견이 적고 사용자 정의 할 수 있습니다
- 상자에서 덜 제공합니다 (더 많이 만들어야합니다)
- Ruby on Rails
- 루비 (배울 수있는 더 쉬운 언어)
- 매우 의견이 있습니다
- 스캐 폴딩과 같은 훌륭한 도구가 있으므로 빨리 물건을 만들 수 있습니다.
- 사용자 인증, 데이터베이스 연결 및 렌더링보기와 같은 많은 기능을 상자에서 제공합니다.
- 자산 파이프 라인은 프론트 엔드 개발에 도움이됩니다
- Ruby는 다른 프로그래밍 언어보다 프로그램을 실행하는 데 시간이 오래 걸립니다.
- 유성
- JavaScript (배울 수있는 더 쉬운 언어)
- 사용자 인증, 데이터베이스 연결 및 렌더링보기와 같은 많은 기능을 상자에서 제공합니다.
- 현대적인 프론트 엔드와 매우 잘 통합됩니다
- 표현하다
- JavaScript (배울 수있는 더 쉬운 언어)
- 매우 사용자 정의 할 수 있습니다
- 매우 가볍습니다
- 덜 내장 된 기능
- 노드는 매우 빠릅니다
백엔드 프레임 워크 선택
이 중 일부를 살펴보고 코드를 살펴보십시오. 또한 각각의 장단점을 조사하십시오. 앱 아이디어에 배우거나 통합하는 것이 가장 좋습니다.
더 많은 자원!
- Django Girls 튜토리얼
- 코드 아카데미
- todomvc
- Codenewbie 팟 캐스트
- DC를 코딩하는 여성
- 다른 프로그래밍 언어는 얼마나 빠르나요?
연락을 유지하십시오!
- aspittel.github.io
- 트위터에서 @aspittel
- Github의 아스 피텔
- LinkedIn의 Ali Spittel